Question

目前，我有一个父组件，该组件呈现一个子组件，并且还将一个组件（称为Modal.vue的模式）作为插槽传递给子组件。

Parent.vue

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

Child.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>

我的问题是，如何在插槽组件中访问孩子的数据（和功能）？

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

Answer 1

我试图基本上在模式插槽中显示一些子数据。本质上，父组件是页面，子组件是表，插槽是模式。对于单击的每个表格行，将出现一个模式，其中包含表格数据。您会如何建议这样做

也许是这样吗？

<template>
  <div>
    <table>
      <row v-for="item in items" @click="onRowClick(item)"
         ....show some data
      </row>
    </table>
    <modal v-if="activeItem" :item="activeItem" @onClose="onModalClose" />
  </div>
</template>
<script>
export default {
  name: 'child',
  props: ["items"]
  data() {
    return {
      activeItem: null
    }
  },
  methods: {
    onRowClick(item) {
      this.activeItem = item;
    },
    onModalClose() {
      this.activeItem = null;
    }
  }
}
</script>

我不知道这具有插槽的灵活性吗？

嗯，它不像插槽那样灵活，但是可以完成工作：）

如果您确实需要以某种方式设计子级/表格组件，以便在不同的地方使用它，并更改其一部分的外观（在您的情况下为行详细信息），则可以使用插槽去......

插槽

广告位是内容的分发地址。当您在组件内部放置插槽时，您的意思是“我的父组件可以提供部分模板。渲染此模板时（在父组件的范围内-重要内，因为该模板只能访问父数据” / methods等），我将渲染的结果放在确切的位置在我自己的模板中”。使用常规广告位就像将HTML传递到组件中。

我的问题是，如何在插槽组件中访问孩子的数据（和功能）？

您必须<明确>明确授予插槽模板访问某些儿童数据的权限。假设您的子组件具有道具item。您可以在其中定义作用域插槽，如下所示：

<slot name="rowExpander" :itemProp="item"></slot>

...并像这样在父级内部使用它：

<template v-slot:rowExpander="slotProps">
  <MyRowExpanderComponent :item="slotProps.itemProp" />
</template>

或使用ES2015 destructuring

<template v-slot:rowExpander="{ itemProp }">
  <MyRowExpanderComponent :item="itemProp" />
</template>

几乎所有内容都可以传递到作用域插槽中-数据/属性/方法/计算的，甚至可以使用实例属性，例如$data或$props：

<slot name="rowExpander" :childProps="$props"></slot>

本身无法传递子实例：

<slot name="rowExpander" :child="this"></slot>

（主要是因为this尚未在模板内定义-我认为如果您使用渲染功能在不使用模板的情况下编写组件，则可以做到这一点）

重要的是要了解作用域插槽模板只是常规的Vue模板。它可以访问在其中定义（父级）的对象的所有实例属性，还可以访问slotProps对象的。当您在有作用域的插槽模板内使用组件时，该组件无权访问所有子数据或slotProps 自动魔术-您仍然需要传递它明确地对其进行设置（例如上面的MyRowExpanderComponent示例）

如何访问插槽中子组件的反应性数据？

1 个答案:

插槽