小编pet*_*ski的帖子

目前，我有一个父组件，它渲染一个子组件，并将一个组件（模态组件，称为 Modal.vue）作为插槽传递到子组件中。

家长.vue

<ChildComponent :id='1>
 <modal slot="modal" :postTitle="'test'" />
</ChildComponent>

儿童.vue

export default {
props : ['id'],
data(){
return {
 modalHeading : "Heading"
}
}
<template>
<slot name="modal"></slot>
</template>

Modal.vue

<script>
export default {
  name: "model",
  props: ["postTitle"],
  data() {
    return {
      heading: "test"
    };
  },
  mounted() {
    console.log("mounted modal slot");
    console.log(this.postTitle);
    console.log(this.modalHeading);
};
</script>

<template>
  <div>
    <h2>{{ modalHeading }}</h2>
    <h3>This will be the modal slot</h3>
    <p>{{ postTitle }}</p>
  </div>
</template>

我的问题是，如何访问插槽组件中子级的数据（和函数）？

我一直在尝试让它与作用域插槽一起使用，但似乎无法破解语法。