赞
踩
有的时候我们在使用子组件时,在子组件模板上不同的位置插入不同的内容, 只有一个插槽显然没法满足我们的需求,看示例:
需求如下:
示例代码如下:
<div id="app"> <!-- 使用组件 --> <my-child > <h2>这是一篇介绍vue插槽的文章</h2> <p>这是文章的第一段</p> <p>这是文章的第二段内容</p> <p>这是文章的第三段内容</p> <span>2020年5月1日</span> </my-child> </div> <!-- 组件模板 --> <template id="mychild"> <div class="article"> <div class="title"> <slot></slot> </div> <div class="contont"> <slot></slot> </div> <div class="time"> <slot></slot> </div> </div> </template> <script> // 组件选项对象 let MyChild = { template: `#mychild` }; // 实例中注册组件 const vm = new Vue({ el:"#app", components: { MyChild } }) </script>
结果:
示例结果说明:
这个时候我们就需要给每个插槽指定名字
<slot>
元素可以用一个特殊的特性 name
来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot
特性的元素。
未使用name
属性的slot
插槽被称匿名插槽
, 也可以叫做默认插槽
. 我们在子组件中仍然可以有一个匿名插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
使用具名操作重写上面的示例:
<div id="app"> <!-- 使用组件 --> <my-child > <h2 slot="title">这是一篇介绍vue插槽的文章</h2> <p>这是文章的第一段</p> <p>这是文章的第二段内容</p> <p>这是文章的第三段内容</p> <span slot="time">2020年5月1日</span> </my-child> </div> <!-- 组件模板 --> <template id="mychild"> <div class="article"> <div class="title"> <slot name="title">这里是标题内容的插槽</slot> </div> <div class="contont"> <slot>这里是默认插槽</slot> </div> <div class="time"> <slot name="time">这里是时间的插槽</slot> </div> </div> </template> <script> // 组件选项对象 let MyChild = { template: `#mychild` }; // 实例中注册组件 const vm = new Vue({ el:"#app", components: { MyChild } }) </script>
结果:
此时我们就会发现,分发的内容以及正常插入到对应的插槽上了
通过上面的例子我们就知道了,slot
如果没有显示的使用name
属性指定插槽的名字,那么slot默认有个名字default
,默认插槽,如果在分发内容时,没有指定插槽,所有的内容都将默认插到默认插槽上
通过学习我们知道,插槽的内容最后是在子组件模板上渲染的, 那么就会在有得时候需要在分发的内容中使用子组件中才有的数据,怎么办呢. 这个时候就要用到作用域插槽了
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
简而言之,就是利用slot
标签将子组件的数据传递到分发内中上,就像prop
传递数据给组件一样
在父级中,具有特殊特性 slot-scope
的 <template>
元素必须存在,表示它是作用域插槽的模板。slot-scope
的值将被用作一个临时变量名,此变量接收从子组件传递过来的 props
对象:
示例:
<div id="app"> <!-- 使用组件 --> <my-child > <template slot-scope="props"> <button>{{ props.text }}</button> </template> </my-child> </div> <!-- 组件模板 --> <template id="mychild"> <div> <slot :text="text"></slot> </div> </template> <script> // 组件选项对象 let MyChild = { template: `#mychild`, data(){ return { text: "提交" } } }; // 实例中注册组件 const vm = new Vue({ el:"#app", components: { MyChild } }) </script>
在 2.5.0+,
slot-scope
能被用在任意元素或组件中而不再局限于<template>
。
也就意味着可以如下写法
<div id="app">
<!-- 使用组件 -->
<my-child >
<button slot-scope="props">{{ props.text }}</button>
</my-child>
</div>
显示结果
<div id="app">
<!-- 使用组件 -->
<my-child >
<button slot-scope="{text}">{{ text }}</button>
</my-child>
</div>
很遗憾的告诉你, 具名插槽和作用域插槽的用法在未来即将被废弃?
What? 那么我们怎么处理具名插槽和作用域插槽取消后留下的问题呢? 不用担心,往下看.
v-slot
指令自 Vue 2.6.0 起被引入,提供更好的支持slot
和slot-scope
attribute 的 API 替代方案。v-slot
完整的由来参见这份 RFC。在接下来所有的 2.x 版本中slot
和slot-scope
attribute 仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。
在向具名插槽提供内容的时候,我们可以在一个 <template>
元素上使用 v-slot
指令,并以 v-slot
的参数的形式提供其名称:
<div id="app"> <!-- 使用组件 --> <my-child > <template v-slot:title> <h2>这是一篇介绍vue插槽的文章</h2> </template> <p>这是文章的第一段</p> <p>这是文章的第二段内容</p> <p>这是文章的第三段内容</p> <template v-slot:time> <span>2020年5月1日</span> </template> </my-child> </div> <!-- 组件模板 --> <template id="mychild"> <div class="article"> <div class="title"> <slot name="title">这里是标题内容的插槽</slot> </div> <div class="contont"> <slot>这里是默认插槽</slot> </div> <div class="time"> <slot name="time">这里是时间的插槽</slot> </div> </div> </template> <script> // 组件选项对象 let MyChild = { template: `#mychild` }; // 实例中注册组件 const vm = new Vue({ el:"#app", components: { MyChild } }) </script>
显示结果:
现在 <template>
元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot
的 <template>
中的内容都会被视为默认插槽的内容。
如果你希望更明确一些,仍然可以在一个 <template>
中包裹默认插槽的内容:
<div id="app"> <!-- 使用组件 --> <my-child > <template v-slot:title> <h2>这是一篇介绍vue插槽的文章</h2> </template> <template v-slot:default> <p>这是文章的第一段</p> <p>这是文章的第二段内容</p> <p>这是文章的第三段内容</p> </template> <template v-slot:time> <span>2020年5月1日</span> </template> </my-child> </div>
注意 v-slot 只能添加在 上
绑定在 <slot>
元素上的 attribute 被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 v-slot
来定义我们提供的插槽 prop 的名字:
<div id="app"> <!-- 使用组件 --> <my-child > <template v-slot:default="props"> <button>{{ props.text }}</button> </template> </my-child> </div> <!-- 组件模板 --> <template id="mychild"> <div> <slot :text="text"></slot> </div> </template> <script> // 组件选项对象 let MyChild = { template: `#mychild`, data(){ return { text: "提交" } } }; // 实例中注册组件 const vm = new Vue({ el:"#app", components: { MyChild } }) </script>
显示结果
在上述情况下,当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot
直接用在组件上:
<div id="app">
<!-- 使用组件 -->
<my-child v-slot:default="props">
<button>{{ props.text }}</button>
</my-child>
</div>
这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样,不带参数的 v-slot
被假定对应默认插槽:
<div id="app">
<!-- 使用组件 -->
<my-child v-slot="props">
<button>{{ props.text }}</button>
</my-child>
</div>
这用这种简单语法的情况就是在组件中只有一个默认插槽,一但有多个插槽,请使用完整的语法
2.6.0 新增
动态指令参数也可以用在 v-slot
上,来定义动态的插槽名:
还是以我们刚才文章的那个多插槽为例;
<div id="app"> <!-- 使用组件 --> <my-child > <template v-slot:[head]> <h2>这是一篇介绍vue插槽的文章</h2> </template> <p>这是文章的第一段</p> <p>这是文章的第二段内容</p> <p>这是文章的第三段内容</p> <template v-slot:[food]> <span>2020年5月1日</span> </template> </my-child> </div> <!-- 组件模板 --> <template id="mychild"> <div class="article"> <div class="title"> <slot name="title">这里是标题内容的插槽</slot> </div> <div class="contont"> <slot>这里是默认插槽</slot> </div> <div class="time"> <slot name="time">这里是时间的插槽</slot> </div> </div> </template> <script> // 组件选项对象 let MyChild = { template: `#mychild` }; // 实例中注册组件 const vm = new Vue({ el:"#app", data:{ head:"title", food:"time" }, components: { MyChild } }) </script>
此时template 标签上的v-solt指令参数是一个中括号, 中括号里的值将是一个变量,为当前父组件的数据
2.6.0 新增
跟 v-on
和 v-bind
一样,v-slot
也有缩写,即把参数之前的所有内容 (v-slot:
) 替换为字符 #
。例如 v-slot:header
可以被重写为 #header
:
<div id="app"> <!-- 使用组件 --> <my-child > <template #title> <h2>这是一篇介绍vue插槽的文章</h2> </template> <p>这是文章的第一段</p> <p>这是文章的第二段内容</p> <p>这是文章的第三段内容</p> <template #time> <span>2020年5月1日</span> </template> </my-child> </div>
然而,和其它指令一样,该缩写只在其有参数的时候才可用。这意味着以下语法是无效的:
<my-child >
<!-- 这种写法无效 -->
<template #="props">
<h2>这是一篇介绍vue插槽的文章</h2>
</template>
</my-child>
如果你希望使用缩写的话,你必须始终以明确插槽名取而代之:
<my-child >
<!-- 这种写法有效,因为有指令参数 -->
<template #deatule="props">
<h2>这是一篇介绍vue插槽的文章</h2>
</template>
</my-child>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。