>[success] # 片段 ~~~ 1.Vue 3 現在正式支持了多根節點的組件，也就是片段！ ~~~ >[info] ## vue2.x ~~~ 1.在 2.x 中，由于支持多根節點組件 ~~~ ~~~html <!-- Layout.vue --> <template> <div> <header>...</header> <main>...</main> <footer>...</footer> </div> </template> ~~~ >[info] ## vue3.x ~~~ 1.vue3.x 支持多節點 ~~~ ~~~html <!-- Layout.vue --> <template> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> </template> ~~~ >[danger] ##### 產生的相應問題 ~~~ 1.之前分析過vue 組件可以如果沒有通過prop定義的屬性，父組件傳入將會作用在子組件的根節點上， 現在多節點導致沒有最外層的根節點此時需要指定好這類沒有定義的屬性要作用在那個dom節點上 ~~~ ~~~html <header>...</header> <!--好的都作用在main身上--> <main v-bind="$attrs">...</main> <footer>...</footer> ~~~ * 你也可以這么做 ~~~html <div id="app"> <my-component class="baz"></my-component> </div> ~~~ ~~~ const app = Vue.createApp({}) app.component('my-component', { template: ` <p :class="$attrs.class">Hi!</p> <span>This is a child component</span> ` }) ~~~