vue2
透传 Attributes 是指由父组件传入,且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。
1.含义:父组件向子组件传的参数,未被子组件的props接收,都会在$attrs中出现
//父组件A
<template>
<div class="a">
<div>A: {{a}}</div>
<B class="a-b" :b="a" :c="'1'" :d="'2'" ></B>
</div>
</template>
//子组件B
<template>
<div class="b">
<div>B: {{ b }}</div>
<div>C: {{ $attrs.c }}</div>
<C v-bind="$attrs"></C>
</div>
</template>
<script>
import C from "./C.vue";
export default {
name: "",
inheritAttrs: true, //去除子组件根节点的绑定,但依然可以用$sttrs访问到,且可用v-bind="$attrs"继续向下传递
props: {
b: Number,
},
components: {
C,
},
data() {
return {};
},
created() {
console.log("attr: ", this.$attrs); //attr: {c: '1', d: '2'}
},
};
</script>
//子组件C
<template>
<div class="c">
C: {{$attrs.c}}
</div>
</template>
页面显示
2.inheritAttrs
可以在父组件设置属性、传参等,子组件的根元素会默认继承。如果想要去除绑定,可以使用inheritAttrs
在 B组件页面内有描述,作用:设置false, 可去除子组件根节点的绑定,但依然可以用$attrs访问到,且可用v-bind="$attrs"继续向下传递
inheritAttrs=true
inheritAttrs=false