vue3 slot插槽

作用域

查官方文档插槽 Slots | Vue.js (vuejs.org)

子组件格式:
<slot name='插槽名称name' :属性名1="方法/对象" :属性名2="方法/对象"></slot>
注：属性可以传多个

<!-- 子组件：ChildComponent.vue -->
<template>
  <div>
    <slot :myMethod="childMethod"></slot>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method executed');
    }
  }
}
</script>

父组件格式:
<template #插槽名="{ 属性1， 属性2 }">
注：属性可以接受多个，属性也可以是方法，函数对象
没有设置插槽名 默认#default， 只取一个可以不用{}
接受：函数@click='属性1'， 其他对象或值 {{ 属性2 }}

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <!-- 使用作用域插槽传递函数对象 -->
      <template #default="{ myMethod }">
        <button @click="myMethod">Click me</button>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('Parent method executed');
    }
  }
}
</script>