工作生活

Vue 父子组件通信方式

2019-07-02  本文已影响0人  糕糕AA
  1. 父 --> 子:父组件中用 :xx = "this.xxx",子组件通过props来接收
  2. 子 --> 父:子组件中定义 this.$emit('eventName', data);父组件中接收:@eventName="callback"
  3. 兄弟组件传参,可以使用EventBus:相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。
    • 新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js ;
      import Vue from 'vue';export default new Vue();
    • 在click组件和show组件中import它:import Bus from 'common/js/bus.js';
    • 传递参数的组件中定义:Bus.$emit('getTarget', data);
    • 接收组件中定义:Bus.$on('getTarget', target => { console.log(target); });
  4. 使用vuex状态管理对数据进行统一管理
  5. 父 ->子 -> 孙:使用attrs和listeners实现祖孙组件之间的数据传递
<!-- 子组件中通过v-bind='$attrs'接受数据,通过$listeners接收事件 -->
        <child2 v-bind="$attrs" v-on="$listeners"></child2>

 props: ['one','two'],  //可写可不写
    data () {
        return {
            
        }
    },
    inheritAttrs: false,  //父组件传递动态数据后,子组件的默认行为
// 当inheritAttrs设置为true时,父元素动态绑定组件的数据,子组件如果没有通过props接收的话,该属性就会附加于子组件的根元素上。什么意思看代码
    components: {
        child2    
    },
    mounted () {
        this.$emit('test1')  //触发父组件方法的一种方式
        this.$listeners.test2(123)  //触发父组件方法的另一种方式
    }
<p>props:{{one}}</p>
<p>props:{{two}}</p>
<p>$attrs: {{$attrs['one']}}</p> 

props:['one','two'],  //接收父组件传递的数据,可以不写,通过$attrs来获取
inheritAttrs: false,  //默认行为需要取消
    mounted(){
        this.$emit('test1') //触发父组件方法的一种方式
        this.$listeners.test1(123)//触发父组件方法的另一种方式
    }
  1. :star::star:vue 依赖注入:provide、inject 祖先组件和后代组件的数据传输
    祖先组件可以用 provide 给后代组件提供一些数据;后代组件可以使用 inject 接受祖先组件提供的数据
// father
provide: {
  foo: 'bar',
}

// child
inject: ['foo']
上一篇 下一篇

猜你喜欢

热点阅读