持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
Non-props属性
Non-props属性：父组件给子组件传递内容时，子组件不通过pros接收时使用。
子组件存在单个根节点
子组件存在单个根节点时，vue底层会将父组件传递过来的内容置于子组件最外层标签上，变成子组件最外层签的一个属性。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue -- Non-props</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template:`
<div>
<demo count="hello"/>
</div>
`
})
app.component('demo', {
template:`<div></div>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
Non-props属性将 count="hello" 放在子组件最外层标签上。
页面效果：
inheritAttrs
如果不希望在子组件的标签上展示该属性，可以通过inheritAttrs: false,不继承父组件传过来的non-props属性。
示例代码：
const app = Vue.createApp({
template:`
<div>
<demo count="hello"/>
</div>
`
})
app.component('demo', {
inheritAttrs: false,
template:`<div></div>`
})
页面效果：
子组件存在多个根节点
获取所有属性
可以通过v-bind指令,v-bind='$attrs'，把父组件传递过来的所有non-props属性放到指定div上。
示例代码：
const app = Vue.createApp({
template:`
<div>
<demo count="hello" msg="vue"/>
</div>
`
})
app.component('demo', {
inheritAttrs: false,
template:`
<div v-bind="$attrs"></div>
`
})
页面效果：
获取具体属性
可以通过v-bind指令:msg='$attrs.msg'，把父组件传递过来的具体属性non-props属性放到指定div上。
示例代码：
const app = Vue.createApp({
template:`
<div>
<demo count="hello" msg="vue"/>
</div>
`
})
app.component('demo', {
inheritAttrs: false,
template:`
<div :count="$attrs.count"></div>
<div :msg="$attrs.msg"></div>
<div v-bind="$attrs"></div>
`
})
页面效果：
在方法中获取属性
在方法中通过this.$attrs，把父组件传递过来的属性non-props属性放到指定div上。
示例代码：
const app = Vue.createApp({
template:`
<div>
<demo count="hello" msg="vue"/>
</div>
`
})
app.component('demo', {
inheritAttrs: false,
mounted(){
console.log(this.$attrs);
console.log(this.$attrs.count);
console.log(this.$attrs.msg);
},
template:`
<div></div>
`
})
页面效果：
总结
Non-props属性： 父组件给子组件传递内容时，子组件不通过non-props接收时使用；
inheritAttrs: false： 可以使子组件标签上的不展示该属性；
v-bind='$attrs'： 父组件传递过来的所有non-props属性放到指定div上；
:msg='$attrs.msg': 把父组件传递过来的具体属性non-props属性放到指定div上；
方法中通过this.$attrs， 把父组件传递过来的属性non-props属性放到指定div上；
(完)
