Vue：插槽真香

Vue：插槽真香

一、前言

• 插槽为组件提供了灵活性，使用组件的时候可以通过修改插槽的内容实现灵活的展示内容。
• 下面正式介绍一下插槽的使用方法。

二、插槽的使用

1. 匿名插槽

<comp>yivi</comp>

let comp = {
	template : `
		<div>
            <h1>怎央打</h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot></slot></p>
		</div>		
	`
}

渲染结果：

• 除此之外，还可以为插槽添加默认值

<comp>yivi</comp>
// 如果不传入参数，则默认为马保国
<comp></comp>

let comp = {
	template : `
		<div>
            <h1>怎央打</h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot>马保国</slot></p>
		</div>	
	`
}

渲染结果：

2. 具名插槽

• 如果我们不仅要修改内容，还要修改标题怎么办？
• Vue提供了slot参数，可以在传参的时候传入对应的插槽中。

<comp>
	<template slot="title">闪电五连鞭</template>
    <template slot="name">源来氏佐田</template>
</comp>

let comp = {
	template : `
		<div>
            <h1><slot name="title">怎央打</slot></h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot name="name">马保国</slot></p>
		</div>
	`
}

渲染结果：

3. v-slot

• 这个语法适用于2.6.0+的版本

• 语法格式

• v-slot:slotName
  

• 匿名插槽在新语法下，默认指向default

使用实例：

<comp>
	<template v-slot:title>松果弹抖闪电鞭</template>
    <template v-slot:name>yivi</template>
</comp>

渲染结果：

注意：在新版本中，必须将v-slot属性设定在template元素上，旧版本无要求

• 简写方式：v-slot:name => #name

4. 作用域插槽

• 作用域插槽的适用场景：父组件访问子组件的内部数据

a. 旧版本

slot-scope="slotProps"

• 这里的slotProps是自定义的变量名，指向子组件的data函数返回值；

• 新旧语法不能混用！

  新旧语法不能混用在一个组件标签上
  slot=“xxx” slot-scope=“xx” 均为旧写法，是可以的
  v-slot:xxx slot-scope=“xxx” 新旧写法混合，直接报错
  渲染错误： Unexpected mixed usage of different slot syntaxes

实现样例：

<comp>
            <template slot="title" slot-scope="slotProps">{{ slotProps.title }}</template>
            <template slot="master" slot-scope="slotProps">{{ slotProps.master }}</template>
        </comp>

 let comp = {
            template: `
		        <div>
                    <h1><slot name="title" :title="title"></slot></h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot name="master" :master="master"></slot></p>
		        </div>
		    `,
            data() {
                return {
                    title: "怎央打",
                    master: "马保国"
                }
            }
        }

b. 新版本

v-slot:name="slotProps"

• 这种语法不仅完成了插槽指向，还完成了数据挂载

使用实例：

<comp>
	<template v-slot:title="slotProps">{{ slotProps.title }}</template>
    <template v-slot:master="slotProps">{{ slotProps.master }}</template>
</comp>

 let comp = {
            template: `
		        <div>
                    <h1><slot name="title" :title="title"></slot></h1>
			<p>朋友们好，我是混元形意太极门掌门人<slot name="master" :master="master"></slot></p>
		        </div>
		    `,
            data() {
                return {
                    title: "怎央打",
                    master: "马保国"
                }
            }
        }

渲染结果：

三、父子组件传值

适用于2.6.0+

父组件：

// 使用了简写语法代替v-slot
<template #swiperSlide='{dataMes}'>
  ...
</template>

子组件：

<slot 
  name="swiperSlide" 
  :dataMes='dataMes'
></slot>

• 父组件通过 #slotName 获取子组件 ，通过 { 数据名 } 获取子组件中的数据