插槽的应用

什么是插槽

在vue中我们经常把公共的部分抽取出来单独打包成一个组件，但是在使用这些组件的时候，我们会遇到一些内容上的区别。我们希望在这些组件上添加一些不一样内容，这时候我们就需要使用到插槽来分发内容。

• 匿名插槽

匿名插槽，我们也可以叫它单个插槽或者默认插槽。和具名插槽相对，它是不需要设置 name 属性的，它隐藏的name属性为default。

//父组件
<template>
  <div class="home">
    <Child>
      我是/父组件给child1的
    </Child>
  </div>
</template>

<script>
import Child from "../components/Child.vue";
export default {
  components: { Child },
  data() {
    return {};
  },
};
</script>

//子组件
<template>
  <div>
    <p>我是child1</p>
    <slot></slot>
  </div>
</template>

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

子组件通过slot接受父组件传过来的值,以下就是子组件通过slot接受父组件传给子组件的值,这就是具名插槽

BE46A361-CCD9-4778-A873-F409C20D32CA.png

• 具名插槽

这里说一下多个具名插槽的使用 多个具名插槽，插槽的位置不是使用插槽的位置而定的，是在定义的时候的位置来替换的

<template>
  <div class="home">
    <Child>
      <template v-slot:hasName> <p>我头部</p> </template>
      <template v-slot:hasName2> <p>我是尾部</p> </template>
    </Child>
  </div>
</template>

<script>
import Child from "../components/Child.vue";
export default {
  components: { Child },
  data() {
    return {};
  },
};
</script>

C37585CE-2C03-410E-A11A-F7B078AD2AF2.png

这里也可以看到，他们的位置是根据子组件通过name值来定的

• 作用域插槽

• 当你想在一个插槽中使用数据时，要注意一个问题作用域的问题，Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

又包括了具名作用域和匿名作用域

• 匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写，具名的相反要写的是对应的name))
  v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"

具名作用域

//父级
<template>
  <div class="home">
    <Child>
      <template v-slot="{header}"> <p>{{ header.name }} {{ header.age }}</p> </template>
    </Child>
  </div>
</template>

<script>
import Child from "../components/Child.vue";
export default {
  components: { Child },
  data() {
    return {};
  },
};
</script>

//子级
<template>
  <div>
    <p>我是child1</p>
    <slot :header="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "我是header",
        age: "我13岁了",
      }
    };
  },
};
</script>

匿名作用域

// 父级
<template>
  <div class="home">
    <Child>
      <template v-slot:hasName2="slotProps"> <p>{{ slotProps.footer.name }} {{ slotProps.footer.age }}</p> </template>
    </Child>
  </div>
</template>

<script>
import Child from "../components/Child.vue";
export default {
  components: { Child },
  data() {
    return {};
  },
};
</script>

// 子级
<template>
  <div>
    <p>我是child1</p>
    <slot name="hasName2" :footer="user2"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user2: {
        name: "我是footer",
        age: "我13岁了",
      },
    };
  },
};
</script>