组件通信:
在学习组件的时候,props是输入,组件是输出。在这里的props,就是父向子传递的数据。而子向父传递数据,则是通过$emit来向父组件进行传值,在父组件中的子组件标签上进行挂载即可实现
父传子
1、父传子
在父组件中的子组件标签上绑定一个自定义属性,这个自定义属性的值就是我们要传递的参数。
例子:< zi :list="list> </zi>
我们在子组件接收是使用props
props 可以是个对象,也可以是个数组。
当是个数组时,接收的数据没有限制
当是个对象时,接收的数据可以限制其类型,或设置一个默认的值…
我们使用的时候根使用data中的变量一样即可。
注意:父传子时,子组件不可改变传递的数据<script>
export default {
props: {
list: {
type: type,为我们传递过来的数据类型
default: []
},
},
}
</script>
子传父:
2、子传父
在父组件中的子组件标签上,绑定一个自定义事件。并挂载一个事件。
然后我们在子组件中使用this.$emit(‘自定义事件名’,传递的参数),我们在父组件中触发挂载的这个事件,有一个参数,就是子组件传递过来的数据。
父组件中:中的子组件标签上进行挂载
<zi @emit="emit"> </zi>
子组件中:
在js中通过$emit传递
this.$emit('emit ',this.emit)//去接受data中要传递的数据
兄弟传
3、兄弟组件传递数据
我们的兄弟组件传值可以使用vuex来解决
首先初始化一个全局的$bus
直接在跟目录下的main.js 初始化 $bus 。window.$bus=new Vue();
//实现全局效果
在发送的一方使用 $bus.$emit("aMsg", '数据');
在接收的一方使用$bus.$on("事件名",callback)
// 我们页面B接收数据
$bus.$on("aMsg", (msg) => {
// 我们的msg就是发送哪里发送过来的数据
});