Vue 父子组件通信

几种常见的通信方式：

1、prop 属性

父组件通过绑定属性的方式，给子组件传值，同时子组件通过设置 props 来接收

<div id="app">
  <child :content="msg"></child>
</div>

<script>

  let Child = Vue.extend({
    template: '<h1>{{content}}</h1>',
    props: {
      content: {
        type: String,
        default: () => { return 'from child' }
      }
    }
  })

new Vue({
    el: '#app', 
    data: {
      msg: 'hello'
    },
    components: {
      Child
    }
  })
</script>

　2、$emit

子组件通过调用 this.$emit(‘事件’，‘参数’) 给父组件通信，父组件通过监听 子组件的事件，来获取

<div id="app">
  <v-button @parent="handleParent"></v-button>
</div>

<script>

let vButton = Vue.extend({
  template: '<button @click="handleClick"></button>',
  data: {
    tragger: 'hello vue'
  },
  methods: {
    handleClick() {
      this.$emit('parent', this.tragger)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    content: ''
  },
  methods: {
    handleParent(val) {
      this.content = val
    }
  },
  components: {
    vButton
  }
})
</script>

　3、属性attrs 和 $listeners

 

4、EventBus （bus 总线）

思路就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据，事件监听都存储到这个变量上。这样就达到在组件间数据共享了，有点类似于 Vuex，但复杂的项目还是用 Vuex

子组件通过 EventBus.$emit() 向外触发事件，父组件通过EventBus.$on() 来监听该事件，变量保存在EventBus

 

5、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

 

6、通过ref 属性

//父组件

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.navigate();
        },
    },
}
</script>


//子组件

<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    navigate() {
      console.log('我是子组件的方法');
    },
  },
};
</script>