vue中插槽上手使用

Posted 嘴巴嘟嘟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中插槽上手使用相关的知识,希望对你有一定的参考价值。

什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以在这个占位符中填充任何模板代码,如 html、组件等,填充的内容会替换子组件的<slot></slot>标签。
首先接受项目目录结构
在这里插入图片描述

上手小案例:
Home.vue

<template>
  <div>
    <!-- 使用插槽 -->
    <slot-test>sadfsdf</slot-test>
    <slot-list>
      <item-list v-for="item,n in listData" :key="n">{{item}}</item-list>
    </slot-list>
  </div>
</template>

<script>

import slotTest from "./slot/slotTest.vue";
import slotList from "./slot/slotList.vue";
import itemList from "./slot/itemList.vue";
export default {
  name: "Home",
  components: {  slotTest, slotList,itemList },
  data() {
    return {
      listData: ["123", "456", "789"],
    };
  },
};
</script>

<style  scoped>
</style>

slotTest.vue

<template>
  <div class="slot-test">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "slotTest",
  data() {
    return {};
  },
};
</script>

<style  scoped>
</style>

slotList.vue

<template>
  <ul class="list-slot">
    <slot></slot>
  </ul>
</template>

<script>
export default {
  name: "list",

  data() {
    return {};
  },
};
</script>

<style  scoped>
</style>

itemList.vue

<template>
  <li class="item-list">
    <slot></slot>
  </li>
</template>

<script>
export default {
  name: "itemList",
  data() {
    return {};
  },
};
</script>

<style  scoped>
</style>

接下来是作用域名插槽 , 作用域插槽虽然用的不多,但是还是挺重要的。

  • 要想了解作用域插槽, 先了解需求之后比较好理解: 有时候数据在子组件中,但是却想让父组件来决定具体怎么展示
  • 这时候我们可以通过作用域插槽, 让子组件通过属性绑定的方式,把子组件的数据绑定到子组件中的某个属性上
  • 父组件就可以通过slot-scope = slot拿到子组件中挂载在插槽中的数据,之后通过 比如 slot.attribute 来得到具体的数据(ps: elementui 中的表格就是使用的作用域插槽)
  • 注意在父组件中,如果要拿到子组件通过属性绑定在插槽中的数据需要使用 template 标签
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    这样肯定不行,只是基本的插槽
    现在我们需要把子组件的数据传递给父组件
    在这里插入图片描述
    在这里插入图片描述
    具名插槽
    具名插槽,顾名思义就是给这个插槽起个名字,插槽在使用 name 属性绑定名字后, 在组件被调用的时候,组件内的标签通过 slot 属性来决定某个标签具体渲染哪一个插槽
    在这里插入图片描述
    在这里插入图片描述

以上是关于vue中插槽上手使用的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化

极简之vue插槽的快速了解与应用

极简之vue插槽的快速了解与应用

vue插槽

vue.js-使用插槽分发内容的三个示例