vue 组件传值的方式及方法

父子通信
   1. 父传子
      传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据
      接收:在子组件内部通过props进行接收
            接收的方式有2种 一种是数组接收  另一种是对象接收
            一般情况下我们都使用对象进行接收,因为对象接收可以校验数据的类型

            例子
              props:["val"];
              props:{
                val:String
              }



   2. 子传父
      传递:当子组件给父组件传递数据的时候,通过调用父组件给子组件绑定的自定义事件,然后将值传递过去

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

             

  3.非父子
      1、在vue的原型身上添加一个公共的vue实例,组件之间调用这个公共的实例的$on/$emit来传递数据  传递的一方调用
        $emit  接收值的一方调用$on;

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

      3、EventBus

      4、vuex

猜你喜欢

转载自www.cnblogs.com/zhouyingying/p/10567448.html
今日推荐