vue的组件通信的方式

关于vue组件相互通信的几种方式如下

1.方法一：props和 $emit

​ 父组件通过props向下传递数据给子组件，子组件通过event给父组件发送消息，实际上就是子组件把自己的数据发送给父组件。

2.方法二: $attrs和 $emit

​ 第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？ 如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题，能够让组件A之间传递消息给组件C。

<!--组件C-->
<template>
	<div>
 		<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)">
  </div>
</template>

<script>
	export default {
    name: 'C',
    data () {
      return {}
    },
    methods:{
      passCData(val){
        //触发父组件A中的事件,把从A得到的数据hello C还给A组件
        this.$emit('getCData',val)
      }
   	}
  }
</script>

<!--组件B-->
<template>
	<div>
    <input type="text" v-model="mymessage" @input="passData(mymessage)">
    <!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
    <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
    <C v-bind="$attrs" v-on="$listeners"></C>
  </div>
</template>

<script>
	export default {
    name: 'B',
    props:[
      message:{
      	type: String,
      	default: null
      }
    ],//得到父组件A传递过来的数据,hello B
    methods:{
      passData(val){
        //触发父组件中的事件,把message给组件A
        this.$emit('getChildData',val)
      }
    }
  }
</script>

<!--组件A-->
<template>
	<div>
    <p>this is parent compoent!</p>
    <B 
     :messagec="messagec" 
     :message="message" 
     :getCData="getCData"
     :getChildData="getChildData"></B>
  </div>
</template>

<script>
	export default {
    name: 'A',
    data(){
      return {
        message:'hello B',
        messagec:'hello C' //传递给c组件的数据
      }
    },
    methods:{
      getChildData(val){
        console.log('这是来自B组件的数据',val) //打印hello B
      },
      //执行C子组件触发的事件
      getCData(val){
        console.log("这是来自C组件的数据：", val) //打印hello C
      }
    }
  }
</script>

3.方法3：provide和 inject

在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

<!--父组件-->
<template>
  <div>
    <p>this is parent compoent!</p>
    <child></child>
  </div>
</template>

<script>
	export default {
    name: 'parent',
    provide: {
      forChidrenData:'这是要个子组件的数据'
    },
    data(){
      return {
        message:'hello'
      }
    }
  }
</script>

<!--子组件-->
<template>
  <div>
    <input type="text" v-model="mymessage">
  </div>
</template>

<script>
	export default {
    name: 'child',
    inject:['forChidrenData'], //得到父组件传递过来的数据
    provide: {
      forChidrenData:'这是要个子组件的数据'
    },
    data(){
      return {
        mymessage:this.forChidrenData
      }
    }
  }
</script>

4.方法四：vuex处理组件之间的数据交互

​ 如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

5.方法五：中央事件总线

​ 如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。

<!--兄弟组件A-->
<template>
  <div>
    <p>this is brother1 compoent!</p>
    <input type="text" v-model="mymessage" @input="passData(mymessage)">
  </div>
</template>

<script>
	export default {
    name: 'brother1',
    data(){
      return {
       	mymessage:'hello brother1'
      }
    },
    methods:{
      passData(val){
        //触发全局事件globalEvent
        bus.$emit('globalEvent', val)
      }
    }
  }
</script>

<!--兄弟组件B-->
<template>
  <div>
    <p>this is brother2 compoent!</p>
    <p>brother1传递过来的数据：{{brothermessage}}</p>
  </div>
</template>

<script>
	export default {
    name: 'brother2',
    data(){
      return {
        brothermessage:''
      }
    },
    mounted(){
      //绑定全局事件globalEvent
      bus.$on('globalEvent',(val)=>{
        this.brothermessage = val;
      })
    }
  }
</script>

//中央事件总线
var bus=new Vue();
var app=new Vue({
  el:'#app',
  template:`
    <div>
      <brother1></brother1>
      <brother2></brother2>
    </div>
  `,
   beforeDestroy(){
sd     bus.$off('globalEvent')
  }
})

6.方法六: $parent 和 $children

Vue.component('child',{
  props:{
    value:String, //v-model会自动传递一个字段为value的prop属性
  },
  data(){
    return {
      mymessage:this.value
    }
  },
  methods:{
    changeValue(){
      this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
    }
  },
  template:`
    <div>
      <input type="text" v-model="mymessage" @change="changeValue">
    </div>`
})
  
Vue.component('parent',{
  template:`
    <div>
      <p>this is parent compoent!</p>
      <button @click="changeChildValue">test</button >
      <child></child>
    </div>
  `,
  methods:{
    changeChildValue(){
      this.$children[0].mymessage = 'hello';
    }
  },
  data(){
    return {
      message:'hello'
    }
  }
})

var app=new Vue({
  el:'#app',
  template:`
    <div>
      <parent></parent>
    </div>
  `
})

vue父子组件的生命周期

一、加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

二、子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

三、父组件更新过程

父beforeUpdate->父updated

四、销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed