随笔1：vue跨组件页面通信

最新推荐文章于 2024-07-08 10:04:44 发布

只是风景丨

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量421

点赞数 4

文章标签： vue

原文链接：https://www.cnblogs.com/vickylinj/p/13376391.html

版权

随笔1：vue跨组件页面通信

不谈event bus ，vuex说一说不常用但却异常好用的provide/inject和$attrs/ $listeners

provide / inject

在深层次的组件通信中，我们除了使用中央事件总线eventbus外，还可以使用组件的依赖注入方法及provide/inject。
provide选项允许我们指定我们想要提供给后代组件的数据/方法。

如果提供的是方法

provide: function () {
  return {
    fun: this.fun
  }
}

如果提供的是数据

provide: function () {
  return {
    name: 'Bob'
  }
}

然后在任何后代组件里，我们都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性：

//接受方法
inject: ['fun']
//接受数据
inject:['name']

实例演示

创建parent.vue，提供变量name，并调用children1组件

<template>
    <div>
        <children1></children1>
    </div>
</template>
<script>
import Children1 from './children1'
export default {
    data() {
        return {

        }
    },
    components:{
        Children1
    },
    provide(){
        return{
            name:'我是你爷爷'
        }
    }
}
</script>

创建children1.vue，并在其中调用children2.vue

<template>
    <div>
        <children2></children2>
    </div>
</template>
<script>
import Children2 from './children2'
export default {
   components:{
       Children2
   }
}
</script>

创建children2.vue，并在其中注入祖先提供的变量

<template>
    <div>
        <label for="child">孙子收到信息：<input type="text" name="" id="child" :value="name"></label>
    </div>
</template>
<script>
export default {
    inject:['name']
}
</script>

这样children2就可以访问到name了
通俗来讲，你可以把依赖注入看作一部分“大范围有效的 prop”，祖先组件不需要知道哪些后代组件使用它提供的属性，后代组件不需要知道被注入的属性来自哪里。

但是，它还是有一定的负面效果。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的属性是非响应式的。

provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

官方文档也说了，如果想要想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像Vuex这样真正的状态管理方案了。

$attrs/ $listeners

$attrs

官方解释：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

我的理解：

接收除了props声明外的所有绑定属性（class、style除外）

图解：
在这里插入图片描述
由于child.vue 在 props 中声明了 name 属性，$attrs 中只有age、gender两个属性，输出结果为：

{ age: “20”, gender: “man” }

在这里插入图片描述
另外可以在 grandson.vue 上通过 v-bind="$attrs"，可以将属性继续向下传递，让 grandson.vue 也能访问到父组件的属性，这在传递多个属性时会显得很便捷，而不用一条条的进行绑定。

如果想要添加其他属性，可继续绑定属性。但要注意的是，继续绑定的属性和 $attrs 中的属性有重复时，继续绑定的属性优先级会更高。

$listeners

官方解释：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

我的理解：

接收除了带有.native事件修饰符的所有事件监听器

图解
在这里插入图片描述
parent.vue 中对 child.vue 绑定了两个事件，带有.native的 click 事件和一个自定义事件，所以在 child.vue 中，输出$listeners的结果为：

{ customEvent: fn }
在这里插入图片描述
同 attrs 属性一样，可以通过 v-on="$listeners"，将事件监听器继续向下传递，让 grandson.vue 访问到事件，且可以使用 $emit 触发 parent.vue 的函数。

如果想要添加其他事件监听器，可继续绑定事件。但要注意的是，继续绑定的事件和 $listeners 中的事件有重复时，不会被覆盖。当 grandson.vue 触发 customEvent 时，child.vue 和 parent.vue 的事件都会被触发，触发顺序类似于冒泡，先到 child.vue 再到 parent.vue。

使用场景：

组件传值时使用：爷爷在父亲组件传递值，父亲组件会通过$ attrs获取到不在父亲props里面的所有属性，父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法；

对一些UI库进行二次封装时使用：比如element-ui，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候 $a t t r s 和$ listners是个完美的解决方案