孙卫琴的《精通Vue.js》读书笔记-插槽slot的基本用法

本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

Vue组件可以像DOM元素一样插入到父组件的模板中。许多DOM元素都具有内容，例如以下

Hello
1

那么，是否可以为Vue组件提供内容呢？答案是肯定的，可以使用Vue的插槽组件来实现。如图1所示，组件的工作机制如下：
（1）在子组件的模板的特定位置插入组件，表示此处存在一个插槽。
（2）父组件的模板为子组件模板中的组件提供内容，子组件模板的组件读取父组件提供的内容，并把它插入到子组件模板中。

图1 组件的工作机制

在例程1的basic.html中有一个组件，在它的模板中插入了组件：

template: '
'
1

在basic.html中，根组件就是组件的父组件。在根组件的模板中，为组件提供了内容“Hello”：

Hello
1

组件模板中的组件能够读取以上内容“Hello”，并把它插入到组件的模板中。
例程1 basic.html

      

    

      Hello
    

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

通过浏览器访问basic.html，会得到如图2所示的网页。

图2 basic.html的网页

根组件模板中的组件渲染后的结果为：

Hello
1

由此可见，组件模板中的组件就像占位标记，它能够把父组件提供的内容插入到子组件模板中组件所在的位置。