vue 框架学习（6） 插槽及使用

template: “#component1”

},

‘component2’: {

template: “#component2”

},

‘component3’: {

template: “#component3”

}

}

})

第三步：使用组件

提示：

组件里定义一个元素slot（可以有后备内容，就是默认值）

slot元素内容，可以有后备内容，就是默认值，当输入内容为空的，可以显示后备内容，

如果有输入内容就会slot替换成输入内容，后备内容就不会显示

示例 ：

输入的内容

百度一下，你就知道

组件1

默认值

组件2

二、具名插槽

---

之前说过，有一些组件是一些通用的布局模板，替换的内容每个都不一样，需要指定替换那个插槽位置，这时候就要给插槽取名来区分

2.1 在slot元素上使用attribute（属性）：name

2.2 怎么把内容放在制定的插槽位置？

使用指令v-slot和template结合

内容

2.3 使用具名插槽

第一步：定义子组件模板

第1个插槽

第1个插槽

第2个插槽

第2个插槽

第二步：在实例注册组件component1</