vue笔记-inheritAttrs及$attr表示含义(一)
一、引用官方解释:inheritAttrs:默认值true,在这种情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上$attr:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)二、代码释义自定义子组件:Vue....
·
一、引用官方解释:
inheritAttrs:默认值true,在这种情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上
$attr:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)
二、代码释义
自定义子组件:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`,
mounted:function(){
console.log(this.$attrs);
}
})
父组件:
const app = new Vue({
el:'#app',
data:{
customInputText:"customInputText",
a:'1'
}
});
使用一:
<custom-input
v-bind:value="customInputText"
v-on:input="customInputText = $event"
></custom-input>
在这种情况下,子组件的console.log(this.$attrs);代码的结果是:Object {}
使用二:
<custom-input
v-bind:value="customInputText"
v-on:input="customInputText = $event"
:a="a"//增加此处代码
></custom-input>
在这种情况下,子组件的console.log(this.$attrs);代码的结果是:Object {a: “1”}
且子组件根元素上出现:a=”1”属性,
当在子组件中加入inheritAttrs:false
时a属性就不会自动加到根元素上了。
总之一句话:$attrs存储非prop特性,inheritAttrs控制vue对非prop特性默认行为
更多推荐
已为社区贡献5条内容
所有评论(0)