标签：Non vue -- app inheritAttrs 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。