vue插槽solt

1、匿名插槽

父组件：

<template>
  <div>
    <Child>
      <div>我是福福福福</div>
    </Child>
  </div>
</template>

子组件：

<template>
  <div>
    <slot></slot>
  </div>
</template>

2、具名插槽
v-slot 缩写 #，例如 v-slot:header 可以被重写为 #header

父组件的 v-slot:box1对应子组件的 name=“box1” 才能显示出来
父组件：

<template>
  <div>
    <Child>
      <template v-slot:box1>
        <div>我是box1</div>
      </template>
    </Child>
  </div>
</template>

子组件：

<template>
  <div>
    <slot name="box1"></slot>
  </div>
</template>

3、作用域插槽
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。想要访问子组件中的data数据就要使用作用域插槽
父组件的 v-slot:box1=“scope” 的 box1对应子组件的 name=“box1”,如果只有一个插槽可以默认 v-slot:default=“scope”
父组件：

<template>
  <div>
    <Child>
      <template v-slot:box1="scope">
        <div>{{ scope.aa.lastName }}</div>
      </template>
    </Child>
  </div>
</template>

子组件：

<template>
  <div>
    <slot name="box1" v-bind:aa="user">{{ user.firstName }} </slot>
  </div>
</template>
<script>
export default {
  name: "solt",
  props: {},
  data() {
    return {
      user: {
        firstName: "chen",
        lastName: "xiansheng"
      }
    };
  },
  methods: {}
};
</script>

4、解构插槽
父组件：

<template>
  <div>
    <Child>
      <template v-slot:box1="{ aa }">
        <div>{{ aa.lastName }}</div>
      </template>
    </Child>
  </div>
</template>

子组件：

<template>
  <div>
    <slot name="box1" v-bind:aa="user">{{ user.firstName }}</slot>
  </div>
</template>
<script>
export default {
  name: "solt",
  props: {},
  data() {
    return {
      user: {
        firstName: "chen",
        lastName: "xiansheng"
      }
    };
  },
  methods: {}
};
</script>

5、动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<template v-slot:[dynamicSlotName]>
</template>