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

Vue中传值主要分为两部分

父子通讯

    1.父传子

    传递：当子组件在父组件中当作标签使用的时候,经过给子组件绑定一个自定义属性，值为须要传递的数据

      接收：在子组件内部经过props进行接收

            接收的方式有2种 一种是数组接收  另外一种是对象接收

            通常状况下咱们都使用对象进行接收，由于对象接收能够校验数据的类型

            例子

              props:["val"];

              props:{

                val:String

              }

    2. 子传父

       传递:当子组件给父组件传递数据的时候，经过调用父组件给子组件绑定的自定义事件，而后将值传递过去

      接收：父组件经过自定义事件的函数来接收子组件传递过来的数据(注意这个自定义方法的函数在绑定的时候不须要加())

      （2）、做用域插槽　

　　　　带参数的插槽

      　　　　反向传值

        　　　　将子组件的数据传递给父组件，只须要给组件内部的slot绑定一个自定义属性

        　　　　在父组件中，子组件标签的内部书写一个template标签，经过scpoe来接收子组件传递过来的数据

非父子

       一、在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的$on/$emit来传递数据  传递的一方调用

        $emit  接收值的一方调用$on;

      二、手动封装$on $emit $off--->原理应用了观察者模式

      三、EventBus

      四、vuex