Vue中插槽slot的使用

　　插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。

　　由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。

　　非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制；

　　插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

1、插槽内容

　　vue实现了一套内容分发的api，将 slot 元素作为承载内容分发的出口。

　　插槽内可以包含任何模板代码，包括html，以及其他组件。

　　如果组件内没有一个 slot 元素，那么该组件起始标签和结束标签之间的任何内容都会被抛弃。

2、编译作用域

　　规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

3、后备内容

　　有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

　　很简单，就是默认值的概念。<slot>Submit</slot>

4、具名插槽

　　需要多个插槽的情况，slot 元素有一个特殊的属性：name，用来定义额外的插槽。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

　　在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<template v-slot:footer><p>Here's some contact info</p>
</template>

　　现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

　　注意：v-slot只能添加在一个 <template> 上（有一种例外），这一点和已废弃的slot特性不同

5、作用域插槽

<current-user>{{ user.firstName }}
</current-user>

　　上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。为了让 user 在父级的插槽内容可用，我们可以将 user 作为 <slot> 元素的一个特性绑定上去：

<span><slot v-bind:user="user"> {{ user.lastName }} </slot> </span>

　　绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：

<current-user><template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>

　　我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

　　（1）独占默认插槽缩写方式：

　　当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上，这也就是上面说的例外情况

<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user>

　　注意：只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

　　（2）解构插槽：

　　作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里，这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式，所以可以利用ES6的解构来传入参数

<current-user v-slot="{ user: person }">{{ person.firstName }}
</current-user>

　　解构：v-slot="{ user }"

　　重命名：v-slot="{ user: person }"

　　定义默认值：v-slot="{ user = { firstName: 'Guest' } }"

6、动态插槽名

　　<template v-slot:[dynamicSlotName]> ... </template>

7、缩写

　　v-slot:header 可以被重写为 #header

8、其他示例

　　主要来自官网学习整理：https://cn.vuejs.org/v2/guide/components-slots.html

转载于:https://www.cnblogs.com/goloving/p/11126937.html

Vue中插槽slot的使用相关推荐

Vue的插槽slot的理解
Vue中插槽slot的理解 1.什么是插槽 2.插槽分类单个插槽具名插槽作用域插槽 3.版本升级后 v-slot的用法默认插槽还是使用,没有变化具名插槽作用域插槽本文将从之前的slot. ...
深入理解vue中的slot与slot-scope （简单易懂）
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
vue 中插槽的三种类型
vue中的slot主要分三种 :匿名插槽,具名插槽,作用域插槽一,匿名插槽: 语法:<slot></slot> 1.没有为插槽指定名称 2.通过slot标签可以添加匿名插槽 ...
Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法 ...
Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
深入理解vue中的slot与slot-scope
写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&qu ...
slot属性值_深入理解vue中的slot与slot
作者/云荒杯倾写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者 ...
怎样理解vue中的slot
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...
vue中插槽solt的使用
solt就是插槽默认会把组件中间的内容渲染出来案例: 在app.vue中直接在组件模版里写内容是不会在页面中显示的这个时候就在card子组件里写上solt标签 solt标签就代表根组件里 ...

Vue中插槽slot的使用

Vue中插槽slot的使用相关推荐

最新文章

热门文章