vue中插槽上手使用

Posted 2021-06-19 嘴巴嘟嘟

什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<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 属性来决定某个标签具体渲染哪一个插槽