Как получить доступ к реактивным данным дочернего компонента в слоте?

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>

Я не понимаю, откуда у этого слота гибкость?

Он не такой гибкий, как слот, но выполняет свою работу:)

Если вам действительно нужно спроектировать свой дочерний компонент / компонент таблицы таким образом, чтобы можно было использовать его в разных местах и ​​изменить внешний вид его части (детали строки в вашем случае), слоты - это то, что вам нужно...

Слоты

Слоты - это точки распространения контента. Когда вы размещаете слот внутри своего компонента, вы говорите: "Мой родительский компонент может предоставить частичный шаблон. Когда этот шаблон визуализируется (внутри области родительского компонента - важно, потому что этот шаблон имеет доступ только к родительским данным / методам и т. Д.), Я Я возьму полученный результат и помещу его именно в это место внутри моего собственного шаблона ". Использование обычного слота похоже на передачу HTML в ваш компонент.

Мой вопрос: как мне получить доступ к дочерним данным (и функциям) в моем компоненте слота?

Вы должны явно предоставить шаблону слота доступ к некоторым дочерним данным. Допустим, у вашего дочернего компонента есть опораitem. Вы можете определить слот внутри него следующим образом:

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

... и используйте его внутри родителя следующим образом:

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

Или используя деструктуризацию ES2015

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

В слот с заданной областью можно передать практически все - data/props/method/computed, вы даже можете использовать такие свойства экземпляра, как $data или $props:

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

Это невозможно передать ребенка экземпляр сам:

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

(в основном потому, что this не определен внутри шаблона - я думаю, это можно сделать, если вы напишете свой компонент без шаблона с помощью функции рендеринга, но это уже другая история)

Важно понимать, что шаблон слота с ограниченной областью видимости - это просто обычный шаблон Vue. Он имеет доступ ко всем свойствам экземпляра компонента, в котором он определен (родительский), а также кslotPropsобъект. Когда вы используете компонент внутри шаблона слота с заданной областью, этот компонент не имеет доступа ко всем дочерним данным илиslotProps автоматически - вам все равно нужно передать его явно (как в моемMyRowExpanderComponent пример выше)