>[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> ` }) ~~~