vue.js -- Non-prop属性
作者：互联网
目录
Non-prop属性
Non-prop属性：父组件给子组件传递内容时，子组件不通过pros接收时使用。
子组件存在单个根节点
子组件存在单个根节点时，vue底层会将父组件传递过来的内容置于子组件最外层标签上，变成子组件最外层签的一个属性。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue -- Non-prop</title>
<!-- 使用CDN引入Vue -->
<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-prop属性将 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上。
可以通过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>
`
})
页面效果：
总结
Non-prop属性：父组件给子组件传递内容时，子组件不通过pros接收时使用
inheritAttrs: false： 可以使子组件标签上的不展示该属性
v-bind=’$attrs’：把父组件传递过来的所有non-props属性放到指定div上
:msg=’$attrs.msg’: 把父组件传递过来的具体属性non-props属性放到指定div上
(完)
标签：Non,vue,--,app,inheritAttrs,prop,组件,属性 来源： https://blog.csdn.net/m0_47901007/article/details/118577851