本文共计751个文字，预计阅读时间需要4分钟。

插入内容与输出按钮+FancyButton.vue：父页面使用：Click me! -- 插槽内容 --最终渲染的DOM如下：

插槽内容与出口

FancyButton.vue:

<button class="fancy-btn"> <slot></slot> <!-- 插槽出口 --> </button>

父页面使用：

<FancyButton> Click me! <!-- 插槽内容 --> </FancyButton>

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!</button>

插槽内容可以是任意合法的模板内容，不局限于文本。 如父页面可以使用：

<FancyButton> <span style="color:red">Click me!</span> <AwesomeIcon name="plus" /> </FancyButton>

渲染作用域

插槽内容无法访问子组件的数据。 父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。