vue 最全组件通信方法

组件通信常⽤⽅式：props、event、vuex
边界情况：$parent、$children、$root、$refs、provide/inject
⾮prop特性：$attrs、$listeners

1. props
2. $emit / $on

//vue中$emit与$on
var Event = new Vue();//相当于又new了一个vue实例，Event中含有vue的全部方法；
Event.$emit('msg',this.msg);//发送数据，第一个参数是事件名，接收时还用这个名字接收，第二个参数是要传递的参数
Event.$on('msg',function(msg){}) //第二个参数是一个方法，要对数据的操作  

3. $children：父组件可以通过$children访问⼦组件实现⽗⼦通信，$children 访问子组件实例，返回的是一个子组件数组 因为是异步，所以不保证顺序的

// parent
this.$children[0].xx = 'xxx'

4. $parent/$root(兄弟组件之间通信可通过共同祖辈搭桥，$parent或$root；$root是Vue实例)

// brother1
methods: {
  aa() {
    this.$parent.$emit('kkkk','要传递的值')
  }
},
// brother2
created() {
  this.$parent.$on('kkkk', function (val) 
    console.log(val);//兄弟传过来的值
  })
},

5. refs：获取⼦节点引⽤

 // parent
<HelloWorld ref="hw"/>
mounted() {
 this.$refs.hw.xx = 'xxx'
}

6. $attrs/$listeners:隔代传参，爷爷-》儿子=》孙子，且只能隔一代，到重孙不可以。
   包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当⼀个组件没有
   声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 ( class 和 style 除外)，并且可以通过 v-bind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。

//父组件
<template>
  <div><Child2 yhy="hahahaha" zxg="xixixixi" msg="some msg from parent"></Child2></div>
</template>
<script>
  import Child2 from "@/components/communication/Child2.vue";
  export default {
  components: {Child2}
    data() {
      return {};
    },
  };
</script>

//子组件
<template>
  <div>
    <!-- $attrs：子组件直接使用-->
    <p>{{ $attrs.msg }}</p>   <p>{{ $attrs.yhy }}</p>   <p>{{ $attrs.zxg }} </p>
    <!-- 隔代传参:v-bind会展开$attrs,在孙子组件用prop接受 -->
    <Grandson v-bind="$attrs"></Grandson>
  </div>
</template>
<script>
  import Grandson from "@/components/communication/Grandson.vue";
  export default {
    components: {
      Grandson
    },
    data() {
      return {};
    },
  };
</script>

//孙子组件
<template>
  <div>
    <p>---{{ msg }}--</p> <p>---{{ yhy }}--</p> <p>---{{ zxg }}--</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: "",
    },
    yhy: {
      type: String,
      default: "",
    },
    zxg: {
      type: String,
      default: "",
    },
  },
};
</script>

7. vuex
8. bus:任意两个组件之间传值常⽤事件总线 或 vuex的⽅式。
9. provide/inject：能够实现祖先和后代之间传值，不限制代数

<!--父组件 提供-->
{
    project() {
        return {
            parent: this
        }
    }
}
<!--子组件 注入-->
{
    // 写法一
    inject: ['parent']
    // 写法二
    inject: { parent: 'parent' }
    // 写法三
    inject: {
        parent: {
            from: 'parent',
            default: 222
        }
    }
}