访问b表插槽中的父组件作用域

<template>
  <div>
    <child-component>
      <template v-slot:b="{ parentData, parentMethod }">
        <!-- 在这里可以访问到父组件中的数据和方法 -->
        <div>{{ parentData }}</div>
        <button @click="parentMethod">Click</button>
      </template>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'Parent Data',
    };
  },
  methods: {
    parentMethod() {
      console.log('Parent Method');
    },
  },
};
</script>

<template>
  <div>
    <slot name="b" :parentData="parentData" :parentMethod="parentMethod"></slot>
  </div>
</template>

<script>
export default {
  props: {
    parentData: {
      type: String,
      required: true,
    },
    parentMethod: {
      type: Function,
      required: true,
    },
  },
};
</script>