Vue插槽原理和用法的详细说明

本文结合实例介绍了Vue槽的原理和使用方法。分享给大家参考，如下：

1槽内容

Vue实现了一套内容分发API，它基于Web Components当前的草案规范，以槽元素作为承载分发内容的出口。

它允许您像这样组成组件：

Div id=' app 1 '导航-链接URL='/profile '您的个人资料/导航-链接/div，然后您可以在导航-链接模板中写下如下内容：

Vue.component('navigation-link '，{ template : ` a v-bind : href=' URL ' rel=' external no follow ' class=' nav-link ' slot/slot/a ` })；当组件被渲染时，该槽元素将被“您的配置文件”替换。

插槽可以包含任何模板代码，包括HTML:

导航链接url='/profile '！-添加一个字体棒极了的图标-span class=' fa-fa-user '/span您的个人资料/导航链接，甚至其他组件：

导航链接url='/profile '！-添加图标组件-font-awesome-icon name=' user '/font-awesome-icon您的个人资料/导航-链接如果导航-链接不包含slot元素，则传递到其中的任何内容都将被丢弃。

2个命名插槽

有时我们需要多个插槽。例如，假设的具有多个模板的基本布局组件如下：

div class='container '标头！-我们想把表头放在这里-/表头主！-我们希望把主要内容放在这里-/主页脚！-我们想把页脚放在这里- /footer/div在这种情况下，slot元素有一个特殊的特性：name。此功能可用于定义额外的插槽：

div class=' container ' header slot name=' header '/slot/header main slot/slot/main footer slot name=' footer '/slot/footer/div当向命名的slot提供内容时，我们可以在父组件的模板元素上使用slot属性：

基本布局模板槽=' header主要内容可能有一个页面标题/h1/模板pA段落。/p PAn另一个。/P模板插槽='页脚'球体的一些联系信息/P/模板/基本布局另一个插槽功能直接用于普通元素：

基本布局h1 slot='header '这可能是主要内容的页面标题/h1 pA段落。/p PAn另一个。/P p slot=' footer '这里有一些联系方式/p/base-layout，我们还是可以保留一个未命名的slot，这是默认的slot，也就是说它会作为所有与slot不匹配的内容的统一出口。以上两个示例呈现的HTML将是：

Div class=' container '这里的标题h1可能是页面标题/h1/header主pa段落的主要内容。/p再拿一个。/p/主页脚球体的一些联系信息/p/页脚/div 3默认槽的内容

有时为插槽提供默认内容很有用。例如，提交按钮组件可能希望该按钮的默认内容是“提交”，但同时允许用户将其覆盖为“保存”、“上传”或其他内容。

您可以通过在插槽标签中指定默认内容来实现这一点。

按钮类型=“提交”插槽提交/插槽/按钮如果父组件为此插槽提供内容，默认内容将被替换。

4编译范围

当您想要使用插槽中的数据时，例如：

导航链接URL=“/profile”以{ { user }身份登录。name}}/navigation-link此槽可以访问与此模板中其他地方相同的实例属性(即“范围”相同)。但是，此插槽无法访问导航链接的范围。例如，试图访问一个网址是行不通的。记住一条规则：

父组件模板中的所有内容都将在父范围内编译；子组件模板中的所有内容都在子范围内编译。

5个示波器插槽

添加了2.1.0

有时，您希望为组件提供一个可重用的插槽，可以从子组件获取数据。例如，简单待办事项组件的模板可能包含以下代码：

Vue.component('todo-list '，{ template : ` ul Li v-for=' todo in todos ' v-bind : key=' todo . id ' { todo . text } }/Li/ul ` })；但是在我们应用程序的某些部分，我们希望每个独立的待办事项将呈现与待办事项不同的内容。

为了使这一功能成为可能，您需要做的就是将待办事项的内容包装在一个slot元素上，然后将与其上下文相关的所有数据传递给这个slot:在本例中，这些数据是一个todo对象：

ul Li v-for=' todo in todos ' v-bind : key=' todo . id '！-我们为每件事都准备了一个空位，-！-传入“todo”对象作为插槽的道具。-插槽v-bind : to=todo！-roll back content-{ { todo . text } }/slot/Li/ul现在，当我们使用待办事项组件时，我们可以选择为待办事项定义不同的模板作为替代，并且我们可以通过slot-scope功能从子组件获取数据：

todo-list v-bind : todos=' todos '！-槽作用域的名称是槽道具-模板槽-作用域='槽道具'！-为指定的待办事项定义模板-span v-if=' slotprops。待办事项。is complete/span { { slot props }。待办事项。text}}/template/todo-list在2.5.0中，slot-scope可以用在slot中的任何元素或组件上，而不局限于template元素。

解构插槽范围

如果JavaScript表达式在函数定义的参数位置有效，那么该表达式实际上可以被槽作用域接受。也就是说，您可以在支持的环境中使用这些表达式中的ES2015解构语法。例如：

todo-list v-bind : todos=' todos '模板slot-scope=' { todo } ' span v-if=' todo。is complete/span { { todo }。text}}/template/todo-list这将使作用域槽更干净。

希望本文对vue.js程序的设计有所帮助。