vue必须掌握之组件通信（7种方法）

方法一：$emit / props

• 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件

<!--父组件-->
<template>
  <div>
    <Child :message="message" @customEvent="customEvent"/>
  </div>
</template>
<script>
export default {
  components:{
    Child
  },
  data(){
    return {
      message:'来自父组件的问候'
    }
  },
  methods:{
    customEvent(value){
      //执行子组件触发的事件
      console.log(value)
    }
  }
}
</script>
<!-------------------------------------------------------------------------------------------->

<!--子组件-->
<template>
  <div>
    <p>{{message}}</p>
    <button @click="handleClick">点击向父组件传值</button>
  </div>
</template>
<script>
export default {
  props:['message'],//得到父组件传递过来的数据
  methods:{
    handleClick(){
      //触发父组件中的事件
      this.$emit('customEvent','来自子组件的问候');
    }
  }
}
</script>

方法二、$parent / $children 与 ref

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
• $parent / $children：访问父 / 所有子实例

<!--父组件-->
<template>
  <div>
    <Child ref='children'/>
    <button @click="handleClick">访问子组件</button>
  </div>
</template>
<script>
import Child from './child'
export default {
  components:{
    Child
  },
  data(){
    return {
      message:'我是父组件的数据'
    }
  },
  methods:{
    handleClick(){
      console.log(this.$refs.children.message) 
      console.log(this.$children[0].message) 
      //需要注意的是使用$children返回的是一个数组
    }
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--子组件-->
<template>
  <div>
    <p>{{message}}</p>
    <button @click="handleClick">访问父组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      message:'我是子组件的数据'
    }
  },
  methods:{
    handleClick(){
      console.log(this.$parent.message)
    }
  }
}
</script>

方法三、中央事件总线bus

• 新建一个Vue事件bus对象，然后通过 bus.$emit 触发事件， bus.$on 监听触发的事件。

//eventBus.js
import Vue from 'vue';
export default new Vue();

• 在需要用到的两个不同组件分别引入即可
• 需要注意的是接受数据的组件要清除事件总线eventBus

<!--A组件-->
<template>
  <div>
    <p>A组件</p>
    <button @click="handleClick">向B组件传值</button>
  </div>
</template>
<script>
import eventBus from 'eventBus.js的路径'
export default {
  data(){
    return {
      data:'我是A组件的数据'
    }
  },
  methods:{
    handleClick(){
      eventBus.$emit('change',this.data);
    }
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--B组件-->
<template>
  <div>
    <p>B组件</p>
  </div>
</template>

<script>
import eventBus from 'eventBus.js的路径';
export default {
  //触发事件一般用mounted 或 created 钩子来监听
  mounted(){
    //触发和监听的事件名称要一致
    eventBus.$on('change',(value)=>{
      console.log(value)
    })
  },
  destroyed(){
    eventBus.$off('change');
  }
}
</script>

方法四、依赖注入 provide和inject

• 适用场景：高阶插件/组件库
• 类型：
  • provide：Object | () => Object
  • inject：Array<string> | { [key: string]: string | Symbol | Object }
• 父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
• 不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。

<!--父组件-->
<template>
  <div>
    <h1>父组件</h1>
    <Son/>
  </div>
</template>
<script>
import Son from './son'
export default {
  components:{
    Son
  },
  data(){
    return {
      message:'我是父组件的数据'
    }
  },
  provide(){
    return {
      message:this.message
    }
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--子组件-->
<template>
  <div>
    <h1>子组件</h1>
    <GrandSon />
  </div>
</template>

<script>
import GrandSon from './grandSon';
export default {
  components:{
    GrandSon
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--孙子组件-->
<template>
  <div>
    <h1>孙子组件</h1>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject:['message']
}
</script>

方法五、$attrs 和 $listeners

• 适用场景：多层、递归组件
• $attrs 是包含了所以父组件在子组件上设置的属性（除了prop传递的属性、class 和 style ）
• $listeners 是组件的内置属性，它的值是父组件(不含.native修饰器的) v-on事件监听器
  • 如果子组件已经绑定$listener中同名的监听器，则两个监听器函数会以冒泡的方式先后执行

<!--父组件-->
<template>
  <div>
    <h1>父组件</h1>
    <Son :message1="message1" :message2="message2" name='attr' v-on="{onChange1,onChange2}"/>
  </div>
</template>
<script>
import Son from './son'
export default {
  components:{
    Son
  },
  data(){
    return {
      message1:'我是父组件的数据1',
      message2:'我是父组件的数据2'
    }
  },
  methods:{
    onChange1(val){
      console.log("父组件：" + val)
    },
    onChange2(val){
      console.log(val)
    }
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--子组件-->
<template>
  <div>
    <h1>子组件</h1>
    <!--关键点-->
    <GrandSon v-bind="$attrs" v-on="$listeners" @onChange1="onChange1"/>
  </div>
</template>

<script>
import GrandSon from './grandSon';
export default {
  inheritAttrs:false,
  /**
   * 1、当设置inheritAttrs为true（默认）时，子组件的顶层标签元素中会渲染出父组件传递过来(前提：子组件的props中未注册父组件传递过来的属性)的属性。
   * 2、当设置inheritAttrs为false时，子组件的顶层标签元素中不会渲染出父组件传递过来(前提：子组件的props中未注册父组件传递过来的属性)的属性。
   * 3、不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性。
   */
  components:{
    GrandSon
  },
  methods:{
    //与父组件监听的事件同名了
    onChange1(val){
      console.log('子组件：'+val)
    }
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--孙子组件-->
<template>
  <div>
    <h1>孙子组件</h1>
    <p>{{message2}}</p>
    <button @click="handleClick">点击触发父组件的方法</button>
  </div>
</template>

<script>
export default {
  props:['message2'], //message2被声明
  created(){
    console.log(this.$attrs) //{message1: "我是父组件的数据1", name: "attr"}
    console.log(this.$listeners) //{onChange1: ƒ, onChange2: ƒ}
  },
  methods:{
    handleClick(){
      this.$emit('onChange1','来自孙子的问候')
    }
  }
}
</script>

方法六、v-model

• 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit('input',val)自动修改v-model绑定的值
• prop属性和触发事件可以通过model修改

<!--父组件-->
<template>
  <div>
    <h1>父组件</h1>
    <p>{{inputValue}}</p>
    <Son v-model="inputValue"/>
  </div>
</template>
<script>
import Son from './son'
export default {
  components:{
    Son
  },
  data(){
    return {
      inputValue:'父组件的默认消息'
    }
  }
}
</script>

<!-------------------------------------------------------------------------------------------->

<!--子组件-->
<template>
  <div>
    <h1>子组件</h1>
    <p>父组件传过来的值：{{value}}</p>
    <input @input="handleChange" />
  </div>
</template>

<script>
export default {
  model:{
    prop:'value', //默认（value）可以修改任意值
    event:'input' //默认（input）事件名也可以修改
  },
  props:{
    value:String 
  },
  methods:{
    handleChange(e){
      this.$emit('input',e.target.value)
    }
  }
}
</script>

方法七、VueX