뷰 소품 |禁用속성繼承
6532 단어 vue
前言
一般來說,當在父組件傳遞속성給子組件時,
// parent
<basic-input disabled>
// child
<input>
經渲染後會變成
<input disabled>
但是我們的子組件結構有時不會只有一個節點,通常因為css需要,外層會再包一個標籤,例如:
<div class="container">
<input>
</div>
經渲染後會變成
<div class="container" disabled>
<input>
</div>
disabled
屬性會直接繼承在子物件的根結點上.這時如果不希望组件的根元素繼承 속성,那該怎麼辦呢?
禁用속성繼承
這種情況就需要到組件的option中設置
inheritAttrs: false
,禁用attribute繼承.Vue.component('my-component', {
inheritAttrs: false,
// ...
})
如果子組件是單一檔案的話,在子組件內設置:
export default {
name: 'my-component',
inheritAttrs: false,
props: {
disabled: Boolean
}
}
設置完後,這時你就可以手動決定哪些속성賦予哪個元素,把子物件改為:
<div class="container">
<input disabled>
</div>
這樣disabled屬性就不會跑到根結點上
inheritAttrs: false
在寫基礎組件的時候很常用到,例如 input
、 select
之類的功能型標籤,有關他們屬性
type
、 disabled
、 placehodler
等都希望綁在子物件的特定標籤上.也可以看看官方文件的範例:
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
// parent component 使用 <base-input>
<base-input
label="Username:"
v-model="username"
required
placeholder="Enter your username"
></base-input>
如果對於官方範例子物件
v-bind:value
、 v-on:input
有疑問https://yubo0826.github.io/vue-blog/#/posts/6
對
$attrs
有疑惑的https://v2.cn.vuejs.org/v2/api/#vm-attrs
總結
inheritAttrs: true
(預設),子組件根節點會渲染出父節點傳遞過來的atrribute inheritAttrs: false
,子組件根節點不會渲染出父節點傳遞過來的atrribute 參考
https://v2.cn.vuejs.org/v2/guide/components-props.html
Reference
이 문제에 관하여(뷰 소품 |禁用속성繼承), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yubo0826/vue-prop-jin-yong-attributeji-cheng-12ej텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)