Vue中插槽的使用
Vue中插槽的使用一、为什么要使用插槽:使用插槽的目的在于,使组件更具有扩展性。例如,组件中的一个地方,默认情况下为botton,而在使用的时候,我们有需求需扩展成span、input等,这时候我们就要用到插槽。并且我们可以将共性抽取到组件中,将不同暴露为插槽。一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。二、插槽是vue中的内容分发机制,slot又分三类:默认插槽、具
·
Vue中插槽的使用
-
一、为什么要使用插槽:
- 使用插槽的目的在于,使组件更具有扩展性。
- 例如,组件中的一个地方,默认情况下为botton,而在使用的时候,我们有需求需扩展成span、input等,这时候我们就要用到插槽。并且我们可以将共性抽取到组件中,将不同暴露为插槽。一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
-
二、插槽是vue中的内容分发机制,slot又分三类:默认插槽、具名插槽、作用域插槽。
-
三、slot插槽的使用:
-
子组件预留slot位置,父组件在使用子组件时,在子组件标签中定义的内容,将渲染在slot的位置处;如不定义,则不显示插槽。
-
1、默认插槽
-
默认插槽,又名匿名插槽,不用设置名称属性,单个插槽可以放置在组件的任意位置,
一个组件只能有一个默认插槽
。 -
//子组将中 <template> <div> <h2>子组件 插槽使用</h2> //在子组件中为插槽预留位置 <slot></slot> //默认内容,插槽还可以使用默认内容,在不传递值时显示默认内容的值 <solt>默认内容</solt> </div> </template> //父组将中使用 import Slotdemo from "./soltDemo.vue"; components: {Slotdemo}, <template> <div> <!-- 插槽使用 --> <Slotdemo> <div class="solt"> <div> <el-input placeholder="请输入内容"></el-input> </div> </div> </Slotdemo> </div> </template>
-
-
2、具名插槽
-
当子组件功能复杂时,
子组件的插槽可能并非一个
,这个时候就需要给slot指定一个name属性,也就是具名插槽。 -
//子组件中 <template> <div> <!-- 具名插槽 --> <slot name="title"> title具名插槽默认内容 </slot> <div> <slot name="count"> count具名插槽默认内容 </slot> </div> </div> </template> //父组件中使用 import Slotdemo from "./soltDemo.vue"; components: {Slotdemo}, <!-- 具名插槽使用 --> <!-- 注意:具名插槽一定要在外面包裹一层 template 并在其上面使用 v-solt=" " 属性来指定插槽名称--> <Slotdemo> <template v-solt="title"> <div>title具名插槽 向名字为title的插槽插入内容</div> </template> <template v-solt="count"> <div>count具名插槽 向名字为count的插槽插入内容</div> </template> </Slotdemo>
-
-
3、作用域插槽
-
我们可以将其叫做带数据的插槽,父组件在使用的时候可以替换slot插槽中的显示页面结构,但展示的数据还是来源于子组件。
-
当数据在子组件中,但是插槽中渲染数据的节点由父组件决定,这种情况下,就需要使用作用域插槽。
-
//子组件中使用 solt 插槽将数据 传递至父组件 <template> <div> <slot :list="list"></slot> </div> </template> <script> export default { data() { return { list: ['张三', '李四', '王五'] } }, } </script> //父组件中使用作用域插槽 import Slotdemo from "./soltDemo.vue"; components: {Slotdemo}, <!-- 作用域插槽 --> <!-- 作用域插槽的使用必须要在子组件标签上面使用v-slo 获取到作用域插槽在子组件中的值再在后续中使用 --> <Slotdemo v-slot="{ list }"> <!-- 作用域插槽 --> <ol> <li v-for="item in list" :key="item.id"> {{item.count}} </li> </ol> </Slotdemo>
-
-
-
四、插槽后备内容
-
每一个
<slot>
都可以设置默认值,当外部没有给插槽传递内容时,插槽就可以使用自己的默认值: -
注意:当有值传递时,插槽的默认值也会显示出来
-
<template> <div> <!-- 插槽 --> <slot><h2>默认内容</h2></slot> <h2>子组件</h2> </div> </template>
-
更多推荐
已为社区贡献5条内容
所有评论(0)