$attrs

用途:在对组件进行二次封装的时候会出现孙子组件的传值问题,如果都通过prop进行层层传递太过麻烦,可以选择不使用props传值而通过$attrs传递

定义:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。

用法:父组件正常传入数据,子组件通过在孙组件上v-bind=:"$attrs"将未props声明的数据传递,孙组件通过this.$atrs.xxx进行使用
父组件:
```
子组件
在这里插入图片描述
子组件打印$attrs

孙组件

孙组件打印$attrs
在这里插入图片描述

$listeners

同$attrs的作用类似,$listeners可以将孙组件的事件和参数传递给父组件
孙组件
在这里插入图片描述
子组件
在这里插入图片描述
其中console打印:

父组件
父组件中正常使用即可
在这里插入图片描述
在这里插入图片描述
注:打印中msgA多执行了一次且是undefined是因为子组件中事件进行了从写重写;需要删掉;如果子组件需要用到改事件,暂不知道用法在这里插入图片描述

inheritAttrs

定义:官方定义
父组件:
在这里插入图片描述
子组件
设置inheritAttrs: true时,
在这里插入图片描述
在这里插入图片描述
设置为false 时
在这里插入图片描述
不过通过$attrs依然能获得传入的数据。

provide/inject

https://cn.vuejs.org/v2/api/
可用于祖孙级组件直接的传值
provide 选项应该是一个对象或返回一个对象的函数
inject 选项应该是:
一个字符串数组,或一个对象,对象的 key 是本地的绑定名

Logo

前往低代码交流专区

更多推荐