组件的传参！面试必问！

组件通信:

在学习组件的时候，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就是发送哪里发送过来的数据
   });