vue.js - 如何在插槽中访问子组件的 react 数据？

Question

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

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

我的问题是，如何在我的插槽组件中访问 child 的数据(和函数)？

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

Answer 1

I'm trying to basically display some of the child data in the modal slot. Essentially The parent component is a page, the child component is a table, the slot is a modal. For each table row clicked on, a modal appears with the tables data in it. How would you suggest doing this

也许是这样的？

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

I don't understand how this has the flexibility of a slot?

好吧，它不像插槽那样灵活，但可以完成工作:)

如果您 真的需要以一种允许在不同地方使用它并改变它的一部分外观(在您的情况下为行细节)的方式设计您的子/表组件，插槽是要走的路....

老虎机

Slots 是内容的分发 channel 。当你在你的组件中放置一个插槽时，你说“我的父组件可以提供一个部分模板。当这个模板被渲染时(在父组件范围内 - 重要 因为该模板只能访问父组件的数据/方法等)，我将获取渲染结果并将其 放在我自己的模板中的确切位置 中”。使用常规插槽就像将 HTML 传递到您的组件中。

My question is, how can I access the child's data (and functions) in my slot component?

您必须授予插槽模板访问子项数据的权限 明确 .假设您的子组件有 Prop 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>

几乎可以将任何东西传递到作用域槽中——数据/ Prop /方法/计算，你甚至可以使用像 $data 这样的实例属性。或 $props :

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

它是 无法传递子实例 本身:

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

(主要是因为 this 未在模板中定义 - 我认为如果您使用 render 函数编写没有模板的组件就可以完成，但那是另一回事)

重要的是要了解作用域插槽模板只是常规的 Vue 模板。它可以访问定义它的组件的所有实例属性(父)另外到 slotProps目的。当您在作用域插槽模板内使用组件时，该组件 没有 访问所有子数据或 slotProps自动神奇 - 你仍然需要明确地将它传递给它(就像我的 MyRowExpanderComponent 上面的例子)