slot动态插槽

slot插槽

动态插槽名

• 简单的来说就是 具名插槽的名字是由父组件来决定 并且不是写死的

父组件

<template>
  <div>
    <one :names="name">
      <template #[name]="slotprop">  // 注意一定要用 [] 包裹
        <div> 1  </div>
      </template>
    </one>
  </div>
</template>

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

</script>

子组件

<template>
  <div>
    <template>
      <slot :name="names"></slot>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    names: {
      default: "",
      type: String,
    },
  },
};
</script>