今天举一个例子解释一下inheritAttrs的使用
先看代码
<body>
<div id=\"app\" class=\"vueclass\">
<my-com title=\"标题\" wx-attr1=\"未定义属性1\" wx-attr2=\"未定义属性2\"></my-com>
</div>
<script type=\"text/javascript\">
Vue.component(\"my-com\",{
props:{
title:String,
},
inheritAttrs:false,
template:`
<div wx-attr1=\"hello\" >
<h1>{{title}}</h1>
</div>
`,
})
const App = new Vue({
el:\"#app\",
data:{
},
methods:{
}
})
</script>
</body>
当inheritAttrs的值为false时，自定义属性是插入不到我们的组件中的，结果如下
当inheritAttrs的值为true时，自定义属性可以插入到我们的组件中，并且会覆盖掉在组件中相同未定义属性名称的值，结果如下
但在组件中定义的class属性和style属性，使用inheritAttrs属性并不能阻碍class属性和style属性传到模板中，如果模板中也存在class属性和style属性，这样属性会叠加到一起
结果如下
还有一种情况，先看代码
<body>
<div id=\"app\" class=\"vueclass\">
<my-com title=\"标题\" wx-attr1=\"未定义属性1\" wx-attr2=\"未定义属性2\" class=\"wxClass\" style=\"color:red\"></my-com>
</div>
<script type=\"text/javascript\">
Vue.component(\"my-com\",{
props:{
title:String,
},
inheritAttrs:,
template:`
<div wx-attr1=\"hello\" class=\"div1\" style=\"width:500px\" v-bind=\"$attrs\">
<h1>{{title}}</h1>
</div>
`,
})
const App = new Vue({
el:\"#app\",
data:{
},
methods:{
}
})
</script>
</body>
当模板里绑定v-bind=\”$attrs\”时，inheritAttrs为true时，自定义属性可以插入到我们的组件中，并且会覆盖掉在组件中相同未定义属性名称的值，结果如下
当模板里绑定v-bind=\”$attrs\”时，inheritAttrs为false时，自定义属性可以插入到我们的组件中，但不会覆盖掉在组件中相同未定义属性名称的值，结果如下
当模板里绑定v-bind=\”$attrs\”时，并不会影响class属性与style属性，组件里的值依然会叠加到模板里
© 版权声明
THE END
暂无评论内容