Передача реквизит родителей в слот в Vue, JS - PullRequest
Новая
       17

Передача реквизит родителей в слот в Vue, JS

1 голос
/ 01 октября 2019

В моем приложении есть DocumenContainer компонент, который имеет несколько ChartContainer компонентов. У ChartContainer есть слот, в который я помещаю различные типы графиков (гистограмма, линейный график и т. Д.). Я хотел бы передать данные isOuput дочернему компоненту, который является слотом

ChartContainer (упрощенно): 

<template>
    <div class="card-body">
        <slot v-slot="isOutput"></slot>
     </div>
</template>
<script>
    export default {
        data() { 
            return {
                isOutput : false,
            }
        }
</script>

DocumentContainer : 

<chart-container title="Stats Model" v-slot="slotProps" :documentId="id">
  {{slotProps.isOuput}}
  <v-bar-chart  :docId="id"></v-bar-chart>
</chart-container>

Я попытался передать isOutput родителю (DocumentContainer) с помощью v-slot. Проблема сейчас в том, что я могу печатать только {{slotProps.isOutput}}. Я хотел бы передать это slotProps.isOutput в качестве реквизита для <v-bar-chart>, а 

 <v-bar-chart :isOuput="slotProps.isOutput" :docId="id"></v-bar-chart>

дает мне неопределенное значение в реквизите гистограммы. Есть ли более простой способ, чем передать данные родителю и ребенку? Как мне этого добиться?

1 Ответ

0 голосов
/ 01 октября 2019

Я думаю, что это как-то связано с context

. Это будет работать, если вместо v-bind 

<v-bar-chart v-bind="{ isOutput: slotProps.isOutput, docId: id }"></v-bar-chart>

Пример кода 

const Component1 = {
  template: `
  <div>
    <h2>Component 1</h2>
    <button @click="isOutput = !isOutput">Toggle</button>
    <slot :isOutput="isOutput"></slot>
  </div>
  `,
  data() {
    return {
      isOutput: false,
    }
  }
};

const Component2 = {
  props: ['isOutput'],
  template: `
  <div>
    <h2>Component 2</h2>
    isOutput: {{String(isOutput)}}
  </div>
  `
};

new Vue({
  el: '#app',
  components: {
    Component1,
    Component2
  }
});
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<div id="app">
  <h1>Home</h1>
  <Component1>
    <template v-slot="slotProps">
        isOutput: {{String(slotProps.isOutput)}}
        <Component2 v-bind="{ isOutput: slotProps.isOutput }">
        </Component2>
    </template>
  </Component1>
</div>
...