$attrs
- 只读属性
- 包含了父作用域中不作为 props 被识别 (且获取) 的特性绑定 (class 和 style 除外)
- 可以通过v-bind="$attrs"传入内部组件
包含了父作用域中不作为 props 被识别 (且获取) 的特性绑定 (class 和 style 除外)
父组件
<template>
<div>
// 子组件上绑定了三个值 - happy、peter、attrs
<child :happy="happy" :peter="peter" **attrs="$attrs"**></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'TestPage',
data(){
return {
happy: 'happy',
peter: 'peter'
}
},
components: {
child
}
}
</script>
子组件
<template>
<div>
</div>
</template>
<script>
export default {
name: 'child',
// 只将happy作为prop获取
props: ['happy'],
inheritAttrs: false,
mounted(){
console.log(this.$attrs) // {attrs: "$attrs", peter: "peter"}
},
};
</script>
可以通过v-bind="$attrs"传入内部组件
例:向孙子组件传值
父组件
<template>
<div>
// 子组件上绑定了三个值 - happy、peter、attrs
<child :happy="happy" :peter="peter" attrs="$attrs"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'TestPage',
data(){
return {
happy: 'happy',
peter: 'peter'
}
},
components: {
child
}
}
</script>
子组件
<template>
<div>
<child-child **v-bind="$attrs"**></child-child>
</div>
</template>
<script>
import childChild from './childChild.vue'
export default {
name: 'child',
props: ['happy'],
inheritAttrs: false,
components: {
childChild
}
};
</script>
孙子组件
<template>
<div>
<div>peter:{{peter}}</div>
</div>
</template>
<script>
export default {
name: 'childChild',
// 子组件v-bind="$attrs"后,孙子组件可以直接 props: ['peter']
// props只能获取$attrs中存在的值,如获取 happy,输出为undefined
props: ['peter'],
inheritAttrs: false,
mounted(){
console.log(this.peter) // peter
}
};
</script>
$listeners
- 只读属性
- 包含了父作用域中(不含.native修饰器的)v-on时间监听器
- 可以通过 v-on=“$listeners” 传入内部组件
包含了父作用域中(不含.native修饰器的)v-on时间监听器
父组件
<template>
<div>
<child @editFather="editFather" @click="testListeners" @testNative.native="testNative"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'TestPage',
components: {
child
},
methods: {
editFather(){},
testListeners(){},
testNative(){}
}
}
</script>
子组件
<template>
<div>
</div>
</template>
<script>
export default {
name: 'child',
inheritAttrs: false,
mounted(){
console.log(this.$listeners) // { editFather: f, click: f }
}
};
</script>
可以通过 v-on=“$listeners” 传入内部组件
例:孙子组件修改父组件的值
父组件
<template>
<div>
<child :peter="peter" attrs="$attrs" @editFather="editFather"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'TestPage',
data(){
return {
peter: 'peter'
}
},
components: {
child
},
methods: {
editFather(){
this.peter = 'hello, peter'
}
}
}
</script>
子组件
<template>
<div>
<child-child v-bind="$attrs" v-on="$listeners"></child-child>
</div>
</template>
<script>
import childChild from './childChild.vue'
export default {
name: 'child',
props: [],
inheritAttrs: false,
components: {
childChild
}
};
</script>
孙子组件
<template>
<div>
<div>peter: {{peter}}</div>
<button @click="editFather">改变peter</button>
</div>
</template>
<script>
export default {
name: 'childChild',
props: ['peter'],
inheritAttrs: false,
methods: {
editFather(){
// 孙子组件调用父组件的方法
this.$emit("editFather")
}
}
};
</script>
inheritAttrs
- boolean类型
- 默认值:true
- true:父作用域不作为 props 被识别 (且获取) 的特性将会被“回退”且作为普通的HTML特性应用在子组件的根元素上。
- false:去掉默认行为
- 该属性不影响
class\style
- 该属性不影响
attr
, 无 论 设 置 为true
或false
, 子 组 件 都 可 以 通 过 attrs,无论设置为true或false,子组件都可以通过attrs,无论设置为true或false,子组件都可以通过attrs获取到父组件传过来的属性值
inheritAttrs: true
// 父组件引用
<customEvent
@click="testEvent" testAttr='testAttr_value' testAttr2='testAttr2' class="bushiba?"
@myEvent="emitFN" ref="childtest"
>
</customEvent>
// 子组件 customEvent
<template>
<div>
根节点这个 div 标签将继承非props的所有 attr 和 事件;
(vue内置的特殊attribute是不会继承的)
<div>单节点组件1</div>
<div>单节点组件2</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs: true,
})
</script>
inheritAttrs: false
设置为false后,不论单节点还是多节点的组件,都不会继承任何 attr 和 事件!