27-插槽

插槽

一、插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。

分为：

• 默认插槽

• 具名插槽

• 作用域插槽

二、默认插槽

子组件的模板中使用<slot>定义一个插槽：

<template>
  <div class="category">
      <h3>{{title}}分类</h3>

      <!-- 定义插槽-->
      <slot>没有传入内容的默认显示</slot>
  </div>
</template>

<script>
export default {
    name: 'Category',
    props: ['title']
}
</script>

<style scoped>
.category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
}

h3 {
    text-align: center;
    background-color: orange;
}

img {
    width: 100%;
}
video {
    width: 100%;
}
</style>

父组件引入子组件时，在子组件的标签体内编写html代码，在vue解析后会被插入到子组件的插槽中：

<template>
  <div class="container">
      
      
    <Category title='美食'>
      <!-- img标签会被插入到子组件插槽中 -->
      <img src="http://www.baidu.com/" alt="美食">
    </Category>

    <Category title='游戏'>
      <ul>
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
    </Category>

    <Category title='电影'>
      <video controls src="http://www.baidu.com"></video>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
  name: 'App',
  components: {Category},
  data() {
    return {
      foods:['火锅', '面条', '米饭', '馒头'],
      games:['星际争霸', '魔兽世界', '罗马帝国', '鬼泣'],
      films:['功夫', '甲方乙方', '我不是药神', '追凶者也']
    }
  },
}
</script>

如果要对插槽内的html添加样式，可以写在父组件中，也可以写在子组件中。vue的编译机制是：先在父组件中将插槽内容进行编译，然后嵌入子组件的<slot>位置。所以写在父组件或者子组件中的样式都可以生效。

三、具名插槽

子组件中存在多个插槽，可以为每个插槽指定名称，父组件的内容需要按照插槽名称将Html嵌入子组件的对应插槽中。

子组件中定义带有名称的插槽：

<template>
  <div class="category">
      
      <!-- 使用name属性为插槽定义名称 -->
      <slot name="center">没有传入内容的默认显示</slot>
      <br>
      <slot name="footer">footer的默认显示</slot>
  </div>
</template>

父组件中向子组件插槽插入html时指定插槽名称：

<Category title='美食'>
    
    <!-- 使用slot属性指定该html要插入的插槽 -->
    <img slot="center" src="http://www.baidu.com/" alt="美食">
    
    <a slot="footer" href="http://www.baidu.com">百度一下</a>
</Category>

可以向同一个插槽中追加多个html标签：

<Category title='游戏'>
    <ul slot="center">
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
    </ul>
    
    <!-- 向footer插槽中插入多个标签 -->
    <a slot="footer" href="http://www.baidu.com">单机游戏</a>
    <a slot="footer" href="http://www.baidu.com">网络游戏</a>
</Category>

可以使用<template>标签包裹多个要插入插槽的html：

<Category title='电影'>
    <video slot="center" controls src="http://www.baidu.com"></video>
    
    <!-- 很多元素都要插入插槽，可以使用template进行包裹，不影响最终生成的html结构 -->
    <template slot="footer">
        <div class="foot">
            <a href="http://www.baidu.com">经典</a>
            <a href="http://www.baidu.com">热门</a>
            <a href="http://www.baidu.com">推荐</a>
        </div>
        <h4>欢迎观影</h4>
    </template> 
</Category>

在<template>标签上可以使用v-slot:footer代替slot='footer'：（不常用）

该写法只能用在<template>标签上，不能用在其他标签

<!-- 在template标签上，可以使用v-slot:footer替代slot='footer'， 该写法只能用在template标签上 -->
<template v-slot:footer>
    <div class="foot">
        <a href="http://www.baidu.com">经典</a>
        <a href="http://www.baidu.com">热门</a>
        <a href="http://www.baidu.com">推荐</a>
    </div>
	<h4>欢迎观影</h4>
</template>

四、作用域插槽

数据存储在定义插槽的子组件本身，但是生成数据的结构需要根据组件自身的使用者父组件来决定。

子组件中定义插槽和数据：

<template>
  <div class="category">
      <h3>{{title}}分类</h3>
      
      <!-- 向插槽的使用者传递数据 -->
      <slot :games="games" msg="hello">没有传入内容的默认显示</slot>
      
  </div>
</template>

<script>
export default {
    name: 'Category',
    props: ['title'],
    data() {
        return {
            games:['星际争霸', '魔兽世界', '罗马帝国', '鬼泣'],   // 在子组件中定义数据
        }
    },
}
</script>

父组件上使用插槽时，可以使用scope属性获取到数据：

<Category title='游戏'>
    
    <!-- 定义一个变量result（变量名称可以任意起），接收slot传入的值。传入的值会存进result对象中，key就是solt中的变量名 -->
    <template scope="result">
		<ul>
            <!-- result.games获取到子组件插槽传入的games -->
    		<li v-for="(item,index) in result.games" :key="index">{{item}}</li>
        </ul>

		<!-- result.msg获取到子组件插槽传入的msg -->
		<h4>{{result.msg}}</h4>
    </template>      
</Category>

可以使用ES6的解构赋值进行简写：

<Category title='游戏'>
    <!-- 使用结构赋值的方式简写，直接将接到的插槽参数对象进行解析，插槽的games传给games变量，插槽的msg传给msg对象 -->
    <template scope="{games,msg}">
		<ol>
    		<li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ol>
	<h4>{{msg}}</h4>
    </template>
</Category>

可以使用slot-scope="{games}"替代scope="{games}"，两个属性的作用相同：

<Category title='游戏'>
    <!-- 也可以使用slot-scope属性，和scope属性完全一样 -->
    <template slot-scope="{games}">
		<h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
    </template>
</Category>

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！