Vue知识点整理（四）- Vue中的ajax（2）- slot插槽

最新推荐文章于 2024-11-12 11:19:19 发布

JHY97

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量359

点赞数 1

分类专栏： Vue笔记文章标签：前端 vue

本文链接：https://blog.csdn.net/JHY97/article/details/124335705

版权

Vue笔记专栏收录该内容

34 篇文章 7 订阅

订阅专栏

一、slot插槽

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

1.1 内置组件 - 插槽

内置的组件 - slot 和通过插槽发布内容

1.1.1 默认插槽

使用方式：

父组件中：
        <自定义组件名>
                <div>html结构</div>
        </自定义组件名>

子组件中：
        <template>
            <div>
                <h1>slot默认插槽</h1>
                <!-- 定义插槽 -->
                <slot>插槽的默认值，当没有插入内容时将会渲染该元素</slot>
            </div>
        </template>

1.2 v-slot

v-slot 指令

在2.6.0中，具名插槽和作用域插槽引入了一个新的统一的语法：v-slot。它取代了slot和slot-scope，目前官方废除了slot和slot-scope这两个attribute（即元素标签属性），统一使用v-solt

参数：插槽名 (可选，默认值是 default)

1.2.1 默认插槽

对于默认插槽，v-slot具有一个单独的缩写语句，不带参数的 v-slot 被假定对应默认插槽

父组件中：

        <自定义组件名 v-slot:default="slotProps">
          <h2>{{ slotProps.user.name }}</h2>
        </自定义组件名>

缩写语法：
        <自定义组件名 v-slot="slotProps">
          <h2>{{ slotProps.user.name }}</h2>
        </自定义组件名>

子组件中：
        <template>
            <div>
                <h1>slot默认插槽</h1>
                <!-- 定义插槽 -->
                <slot :user='user'>插槽的默认值，当没有插入内容时将会渲染该元素</slot>
            </div>
        </template>

        <script>
        export default {
            data() {
                return {
                  user: {
                        name:'Tom',
                    },
                  };
                },
              };
        </script>

注意：

只有默认插槽时，组件的标签才可以被当作插槽的模板来使用，这样才可以把 v-slot 直接用在组件上，不然必须放在template标签内
默认插槽的单独写法不能和带参数的v-slot混合使用否则会可能造成作用域混乱

1.2.2 具名插槽

使用方式：

父组件中：
        <自定义组件名>
            <template v-slot:header>
                <div>html结构</div>
            </template>
        </自定义组件名>

子组件中：
        <template>
            <div>
	            <h1>slot具名插槽</h1>
                <slot name="header">
    		        <h2>插槽的默认值，当没有插入内容时将会渲染该元素</h2>
	            </slot>
            </div>
        </template>

具名插槽的缩写：参数之前的所有内容 (v-slot:) 替换为字符 #，例如：

父组件中：
        <自定义组件名>
            <template #header>
                <div>html结构</div>
            </template>
        </自定义组件名>

注意：

该缩写只在其有参数的时候才可用
默认插槽的缩写和v-slot缩写不能够连用

1.2.3 作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

案例练习

App.vue

<template>
  <div>
    <Games title="游戏列表1">
      <template v-slot:gameList="scopeData">
        <ul>
          <li v-for="(g, index) in scopeData.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Games>

    <Games title="游戏列表2">
      <template v-slot:gameList="scopeData">
        <h4 v-for="(g, index) in scopeData.games" :key="index">
          {{ g }}
        </h4>
      </template>
    </Games>
  </div>
</template>

<script>
import Games from "./components/Games.vue";

export default {
  name: "App",
  components: { Games },
};
</script>

<style></style>

Games.vue

<template>
  <div>
    <h3>{{ title }}</h3>
    <slot name="gameList" :games="games"
      >插槽的默认值，当没有插入内容时将会渲染该元素</slot
    >
  </div>
</template>

<script>
export default {
  name: "Games",
  props: ["title"],
  data() {
    return {
      games: ["艾尔登法环", "博德之门3", "Splatoon3", "异度之刃3"],
    };
  },
};
</script>

<style></style>