Vue学习笔记之父子组件通信

Posted on | In

父组件向子组件通信

  • props属性，在子组件初始化时添加对应的props属性 
// father.vue
<child message="hello, my son!"></child>

// child.vue
new Vue({
    ele: '',
    data(){

    },
    props: ['message']
})
  • $broadcast: 父组件广播事件，子组件监听事件 （2.0弃用）
// father.vue
new Vue({
    ...
    methods:{
        tellMySon(){
            this.$broadcast('wordsFromFather', this.message);
        }
    }
})

//child.vue
new Vue({
    ...

    events: {
        wordsFromFather( msg ){

        }
    }
})

子组件向父组件通信

  • $on, $emit的事件模式：子组件$emit事件，父组件监听
// father.vue
<p v-on:wordsFromChild='response'></p>

//child.vue
new Vue({
    data(){
      return {
        'message': ''
      }
    },
    methods:{
        tellMyFather(){
            this.$emit('wordsFromChild', this.message);
        }
    }
})
  • $dispatch事件：子组件dispatch事件，父组件监听 （2.0弃用）
// father.vue
new Vue({
    ...

    events: {
        wordsFromChild( msg ){

        }
    }
})

//child.vue
new Vue({
    data(){
      return {
        'message': ''
      }
    },
    methods:{
        tellMyFather(){
            this.$dispatch('wordsFromChild', this.message);
        }
    }
})