大家好啊~今天是鐵人賽的第11天唷!
今天沒有props當子元件的資料傳遞,不但不會出錯,而是會直接將外層class內容給DOM。
<div id="app">
<!-- 用v-bind傳入className -->
<example-component :class="className"></example-component>
</div>
const app = Vue.createApp({
data() {
return {
className: 'block'
}
}
});
app.component('example-component', {
template: `<div class="child-app"></div>`,
});
app.mount('#app');
需要注意的點是屬性傳遞與繼承,只能在子元件是唯一根節點,當子元件有多個根節點時,Vue不知道該將屬性給哪一個節點,就會報錯。
app.component('example-layout', {
template: `
<header>...</header>
<body>...</body>
<footer>...</footer>`
});
//在某標籤加入v-bind後即可。
app.component('example-layout', {
template: `
<header>...</header>
<body v-bind="$attrs">...</body>
<footer>...</footer>`
});
不希望屬性被子元件繼承,則可加入inheritAttrs:false。
app.component('example-layout', {
inheritAttrs: false,
template: `
<header>...</header>
<body v-bind="$attrs">...</body>
<footer>...</footer>`
});
以上為今天的內容,感謝各位。明天見囉~