지나가는 부모들의 소품들이 Vue,js.

지나가는 부모들의 소품들이 Vue,js.

신청서에 a가 있다.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>

바차트 소품에서 정의되지 않은 걸 보여주고 있어부모와 아이에게 데이터를 전달하는 것보다 더 간단한 방법이 있는가?어떻게 하면 이것을 이룰 수 있을까?

이건 그 일과 관련이 있는 것 같다.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>

참조URL: https://stackoverflow.com/questions/58187899/passing-parents-props-to-slot-in-vue-js