记录：Vue常用的传值通信方法

众所周知，vue的传值方法很多，如下：

• 父传子：子组件设置props + 父组件设置v-bind:/:
• 子传父：子组件的$emit + 父组件设置v-on/@;
• Bus总线：新建一个vue实例， emit发送，on接收,这个方法要注意以下坑1：第一次触发的时候，接收页面 $ on没监听到，可以去了解一下页面跳转的生命周期的关系，注意接收的时间就行了，或者把发送 $ emit放在this. $ nextTick里面；坑2：$on监听不会自动销毁，所以多次跳转会发现接收多次，需要在监听页面的销毁生命周期函数用 $off进行事件销毁 beforeDestroy(){ this.bus. $off(event);}，或者接收前进行销毁this.bus. $off(event). $on；
• Vuex：状态管理的，有state，getters，mutations，actions，modules五个属性，大型项目中比较常用的一种通信手段；
• $ attrs/$ listeners：父传子孙，$ attrs获取属性集合，$listeners获取方法集合，如设置props接收某属性，则该属性传不下去下级子组件

//父组件
<div class="oneVue">
     <div>这是one组件</div>
     <two :name='name' :age='age' @change="change1"></two>//子组件
  </div>
  
    data() {
      return {
        name:'流川命',
        age:18,
      };
  },
  methods: {
     change1() {
      console.log('11122')
    }
  },
 //two组件
 <div class="two">
      这是two组件
      <three v-bind="$attrs" v-on="$listeners"></three>
      <four></four>
    </div>
   props: ['age'],//two组件的props接收了age属性，所以three组件接收不了age
   
   //three组件
 <template>
    <div class="three">
      这是three组件
    </div>
</template>

<script>
export default {
  name: 'three',
  data() {
      return {
      };
  },
  created() {},
  mounted() {
     console.log(this.$attrs)
    console.log('(this.$listeners',this.$listeners)
   this.$listeners.change()
  },
};
</script>

three组件打印的结果：

• provide/inject：祖先组件用provide提供数据，后代子孙组件用inject注入数据，注意此方法普通数据不能自动响应，如果要实现响应，父组件需要提供可响应的对象属性

//父组件
<template>
    <div class="oneVue">
      <div>这是one组件</div>
      <input type="text" v-model="value1.name" @change="change2">
    </div>
</template>

<script>
import two from './two.vue'
export default {
  name: 'oneVue',
  provide() {//父组件提供的数据
    return {
      school:'湘北高中',//非响应数据
      obj:{//非响应数据
        a:'hhh'
      },
      change:this.change1,//提供方法change1
      value:this.value1//提供响应对象属性，利用v-model双向绑定触发，一定得是对象!!!
    }
  },
  data() {
      return {
        value1:{
          name:'初始化'
        },
      };
  },
  methods: {
    change2() {
      this.value = this.value1;
    },
  },

//three组件  孙辈组件
<template>
    <div class="three">
      这是three组件
      {{school}}
      {{obj.a}}
      {{value.name}}
    </div>
</template>

<script>
export default {
  name: 'three',
  //inject:['school','change','obj','value'],
  或者
  inject:{
    //value:{
     // default:() =>{}
    //},
    或者
    'value':'value',
    'school':'school',
    'change':'change',
    'obj':'obj',
  },

结果：value.name的值由初始化变成123时，孙辈组件也跟着变

• $ children/$ parent：直接父子组件的传值，$children的结果是数组
• $ref传值：直接父子组件的传值，ref 是被用来给元素或子组件注册引用信息的，相当于操作dom

如有错漏，欢迎批评指正！！！