<div>Hello</div>

那么，是否可以为Vue组件提供内容呢？答案是肯定的，可以使用Vue的插槽组件实现。如图1所示，组件的工作机制如下。

（1）在子组件的模板的特定位置插入组件，表示此处存在一个插槽。

（2）父组件的模板为子组件模板中的组件提供内容，子组件模板的组件读取父组件提供的内容，并把它插入到子组件模板中。

■ 图1组件的工作机制

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

template: '<div><slot></slot></div>'

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

<display class="pinkbox">Hello</display>

组件模板中的组件能够读取以上内容Hello，并把它插入到组件的模板中。

■ 例程1 basic.html

■ 图2 basic.html的网页

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

<div class="pinkbox">Hello</div>

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