当前位置:网站首页>$attrs/$listeners
$attrs/$listeners
2022-07-31 03:32:00 【The elephant and small ant's life】
如上图所示 $attrs 表示没有继承数据的对象,格式为 {
属性名:属性值}.Vue2.4 提供了 $attrs , $listeners 来传递数据与事件,跨级组件之间的通讯变得更简单.
简单来说:$attrs 与 $listeners 是两个对象,$attrs 里存放的是父组件中绑定的非 Props 属性,$listeners 里存放的是父组件中绑定的非原生事件.
1、简介
- 多级组件嵌套需要传递数据时,通常使用的方法是通过 vuex.
- 但如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点大材小用.为此 Vue2.4 版本提供了另一种方法---- a t t r s / attrs/ attrs/listeners
2、$attrs
- 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外).
- 当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=“$attrs” 传入内部组件.通常配合 interitAttrs 选项一起使用.
有关 interitAttrs 详情可见 Blog Garden Lu Xiaofenglyf 的文章vue组件的inheritAttrs属性
3、$listeners
- 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器.
- 它可以通过 v-on=“$listeners” 传入内部组件.
4、Next we look at an example of cross-level communication
// index.vue
<template>
<div>
<h2>浪里行舟</h2>
<child-com1
:foo="foo"
:boo="boo"
:coo="coo"
:doo="doo"
title="前端工匠"
></child-com1>
</div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
components: {
childCom1 },
data() {
return {
foo: "Javascript",
boo: "Html",
coo: "CSS",
doo: "Vue"
};
}
};
</script>
// childCom1.vue
<template class="border">
<div>
<p>foo: {
{
foo }}</p>
<p>childCom1的$attrs: {
{
$attrs }}</p>
<child-com2 v-bind="$attrs"></child-com2>
</div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
components: {
childCom2
},
inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在 props 声明的属性
props: {
foo: String // foo 作为 props 属性绑定
},
created() {
console.log(this.$attrs);
// { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
// childCom2.vue
<template>
<div class="border">
<p>boo: {
{
boo }}</p>
<p>childCom2: {
{
$attrs }}</p>
<child-com3 v-bind="$attrs"></child-com3>
</div>
</template>
<script>
const childCom3 = () => import("./childCom3.vue");
export default {
components: {
childCom3
},
inheritAttrs: false,
props: {
boo: String
},
created() {
console.log(this.$attrs);
// {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
// childCom3.vue
<template>
<div class="border">
<p>childCom3: {
{
$attrs }}</p>
</div>
</template>
<script>
export default {
props: {
coo: String,
title: String
}
};
</script>
** 如上图所示 $attrs 表示没有继承数据的对象,格式为 {属性名:属性值}.Vue2.4 提供了 $attrs , $listeners 来传递数据与事件,跨级组件之间的通讯变得更简单.**
简单来说:$attrs 与 l i s t e n e r s 是两个对象, listeners 是两个对象, listeners是两个对象,attrs 里存放的是父组件中绑定的非 Props 属性,$listeners 里存放的是父组件中绑定的非原生事件.
5、使用
<el-table
ref="elTable"
:height="tableHeight"
v-bind="$attrs"
v-on="$listeners"
:data="tableData"
>
边栏推荐
猜你喜欢
Problems that need to be solved in distributed system architecture
Recursive query single table - single table tree structure - (self-use)
Based on the local, linking the world | Schneider Electric "Industrial SI Alliance" joins hands with partners to go to the future industry
立足本土,链接全球 | 施耐德电气“工业SI同盟”携手伙伴共赴未来工业
Use of QML
【动态规划】连续子数组的最大和
Addition and Subtraction of Scores in LeetCode Medium Questions
分布式系统架构需要解决的问题
STM32 problem collection
Unity2D 自定义Scriptable Tiles的理解与使用(四)——开始着手构建一个基于Tile类的自定义tile(下)
随机推荐
BP神经网络
[Godot][GDScript] 二维洞穴地图随机生成
Mysql 45 study notes (23) How does MYSQL ensure that data is not lost
Redis 使用LIST做最新评论缓存
BUG definition of SonarQube
Pytest e-commerce project combat (on)
Map.Entry理解和应用
els 方块向右移
[Dynamic programming] Maximum sum of consecutive subarrays
Know the showTimePicker method of the basic components of Flutter
C# remote debugging
MP使用时的几个常见报错
els block to the right
LocalDate加减操作及比较大小
SQL Interview Questions (Key Points)
Daily practice of LeetCode - 138. Copy a linked list with random pointers
(树) 最近公共祖先(LCA)
Difference between unallocated blocks and unused blocks in database files
Just debuted "Fight to Fame", safety and comfort are not lost
Redis uses sorted set to cache latest comments