vue组件通信(二)

可用于祖孙组件间传值的

1.$root

vue子组件可以通过$root属性访问根实例的属性和方法 如果当前实例没有父实例 此实例将会是自己

2.$attrs/ $listener

$attrs

用法:

         1.在组件中输入this,$attrs就可以获取所有父组件传递的除了自己定义的props属性之外的所有属性  

          2. 如果要获取祖父组件传递的数据需要在父组件中使用v-bind绑定一个 $attrs 不绑定只能拿到父组件传递的值

特点:

          1.$attrs 是一个内置属性，指父组件 或祖先组件传递的、除了自己定义的 props 属性之外的所有属性。

           2. 如果子组件声明了$prop,$attrs中与$props相同的属性会被移除

           3. $props必须在组件中注册了props才能用拿到值，所以在嵌套层级比较深的组件中$attrs拿值更加便捷

$listener

 用法:

            1.$listeners 包含了作用在这个组件上所有的监听器，即父组件绑定的全部监听事件，通过 v-on="$listeners"，可以将这些事件绑定给它自己的子组件。在组件中使用this.$listener获取父组件使用v-on传递的函数   直接使用$emit触发父组件或者祖先组件的监听事件

            2.如果要获取祖父组件传递的需要在父组件中使用v-on绑定一个 $listener

特点:

            1.$listeners是组件的内置属性，它的值是父组件(不含.native修饰器的) v-on事件监听器。

             2.组件可以通 过在自己的子组件上使用v-on=”$listeners”，进一步把值传给自己的子组件。如果子组件已经绑定$listener中同名的监听器，则两个监听器函数会以冒泡的方式先后执行。

               $listeners 对象在 Vue 3 中已被移除。事件监听器现在是 $attrs 的一部分

3.provide/injec

//父组件 
 // 父组件通过provide将自己的数据以对象形式传出去
  provide(){
    return {
      msg:'一条信息'
    }
  }
//子组件
// inject:["msg"], // 使用一个注入的值作为数据入口
  inject:{ //或者写成对象
    // 使用一个默认值使其变成可选项
    msg: { // 键名
      from: 'msg', // 来源
      default: '' // 默认值
    }
  }

通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙组件中

         1.provide 和 inject 主要在开发高阶插件/组件库时使用.通过provide/inject可以轻松实现跨级访问父组件的数据,provide和inject是成对出现的.

          2.provide只需要将传递的值抛出，不需要知道使用哪一个子组件，子组件通过inject注入获取数据，也不需要知道父组件是谁，因此在封装组件库的时候很便利。

           3.provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值

           4. 祖父多层provide提供了很多数据，from属性指定取哪一个key;default指定默认值。

4.$dispatch /$broadcast

      在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 —— 通过向上或向下以冒泡的形式传递事件流，以实现嵌套父子组件的通信。但是由于其显功能缺陷，在 Vue 2.0 中就被移除了。虽然 Vue 官网已经不再支持使用 $dispatch 和 $broadcast 进行组件通信，但是在很多基于 Vue 的 UI 框架中都有对其的封装，包括 element-ui、iview 等等。