iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Cloud Native

Vue 上 雲 霄系列 第 11

[Day 11] 忘了約prop桑出門

  • 分享至 

  • xImage
  •  

大家好啊~今天是鐵人賽的第11天唷!/images/emoticon/emoticon13.gif
今天沒有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>`
});

以上為今天的內容,感謝各位。明天見囉~


上一篇
[Day 10] 沒有立場的人怎麼說話
下一篇
[Day 12] 雙向奔赴?還是單戀?
系列文
Vue 上 雲 霄21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言