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上；