【Vue】浅谈Vue中组件传值的几种方式

浅谈Vue中组件传值的几种方式

Vue中传值主要分为两部分

父子通信

1.父传子
传递：当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内部通过props进行接收
接收的方式有2种 一种是数组接收 另一种是对象接收
一般情况下我们都使用对象进行接收，因为对象接收可以校验数据的类型
例子
props:[“val”];
props:{
val:String
}
2.子传父
传递:当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的自定义事件，然后将值传递过去
接收：父组件通过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不需要加())
（2）、作用域插槽　
　　　　带参数的插槽
　　　　反向传值
　　　　将子组件的数据传递给父组件，只需要给组件内部的slot绑定一个自定义属性
　　　　在父组件中，子组件标签的内部书写一个template标签，通过scpoe来接收子组件传递过来的数据
3.非父子
1、在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的$on/$emit来传递数据 传递的一方调用
$emit接收值的一方调用$on;
2、手动封装$on $emit $off—>原理应用了观察者模式
3、EventBus
4、vuex