vue组件之间的通信方式
组件之间的通信方式有很多种 这里分享4种组件之间的通信方式
props(主要是父传子) 自定义事件(主要是子传父) pubsub消息订阅与发布 xuex
1.props和自定义事件
app.vue里面的代码
<template> <div id="app"> <!-- 第三步,渲染组件到页面上 并传参 --> <props name="程连杰" age="22"/> <emit @del2="del3"/> <p ref="word" class="word" >我是即将被删除的</p> </div> </template> <script> // 1.第一步引入组件 import props from './components/Props' import emit from './components/Emit' export default { name: 'app', //2.第二步,挂载组件 components: { props, emit }, methods:{ del3(){ this.$refs.word.remove(); } } } </script> <style scoped> </style>
Props里面的代码
<template> <div> <p>{{name}}</p> <p>{{age}}</p> </div> </template> <script> export default{ name:"Props", // 接收父组件传参 props:['name','age'] } </script> <style scoped> </style>
Emit里面的代码
<template> <button @click="del">删除</button> </template> <script> export default{ name:"Emit", methods:{ del(){ this.$emit("del2") } } } </script> <style> </style>
pubsub消息订阅与发布