Vue 新增的$attrs与$listeners的详解
作者：互联网
inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承（简单的说，inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性）
$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上
$listeners--属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
componentA:
<template>
<div id="app1">
<!-- //此处监听了两个事件，可以在B组件或者C组件中直接触发 -->
<child1 :p-child1="child1" :p-child2="child2" v-on:test1="onTest1" v-on:test2="onTest2">
</child1>
</div>
</template>
<script>
import child1 from './child1.vue';
export default {
data() {
return {
child1:'1',
child2:2
};
},
components: { child1:child1 },
methods: {
onTest1() {
console.log('test1 running...');
},
onTest2() {
console.log('test2 running');
}
}
};
</script>
componentB:
<template>
<div class="child-1">
<p>in child1:</p>
<p>props: {{pChild1}}</p>
<p>$attrs: {{$attrs}}</p>
<hr />
<button @click="changes">子组件1</button>
<!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<child2 v-bind="$attrs" v-on="$listeners" bb="123"></child2>
</div>
</template>
<script>
import child2 from "./child2.vue";
export default {
props: ["pChild1"],
data() {
return {
};
},
inheritAttrs: false,
components: { child2:child2 },
mounted() {
// this.$emit("test1");
},
methods:{
changes(){
this.$emit("test1");
}
}
};
</script>
componentC:
<template>
<div class="child-2">
<p>in child2:</p>
<p>props: {{pChild2}}</p>
<p>$attrs: {{$attrs}}</p>
<button @click="changes2">子组件2</button>
<hr />
</div>
</template>
<script>
export default {
props: ["pChild2"],
data() {
return {};
},
inheritAttrs: false,
mounted() {
// this.$emit("test2");
},
methods:{
changes2(){
this.$emit("test2");
}
}
};
</script>
效果图：
码代码的程序员
发布了57 篇原创文章 · 获赞 14 · 访问量 3万+
私信
关注
标签：child1,child2,Vue,inheritAttrs,listeners,attrs,props,组件 来源： https://blog.csdn.net/weixin_41615439/article/details/104415950