Vue——起占位、包裹作用的标签

在vue中起到占位或包裹作用的常用标签有：template、组件标签、router-view、slot，它们在App挂载到页面上的时候不会展示。

代码示例

//App组件

//Header组件

分析结构

App组件

App组件里有三个亲儿子标签：Header、router-view、Footer。Header标签添加了age、sex、style属性，Header标签还包裹了一个template标签。

Header组件

Header组件有两个亲儿子标签：div、slot

结论总结

①template标签可以有多个亲儿子标签。

②Header组件标签虽然不会展示，但是它上面的属性会被放到Header实例对象的$attrs上，包裹的元素会被挂载到Header实例对象的$slot上。如果Header组件的template里只有一个亲儿子标签A，那么style属性会给亲儿子标签A；如果Header组件的template里有两个及以上亲儿子标签，那么style属性谁都不会给。

③router-view标签上面的属性会被放到路由组件实例对象上，但是里面的子元素会直接丢弃。