부모에서 자녀로 슬롯을 사용하여 소품을 전달하는 방법 -vuejs

부모에서 자녀로 슬롯을 사용하여 소품을 전달하는 방법 -vuejs

부모 컴포넌트와 자식 컴포넌트가 있습니다.

상위 구성 요소의 템플릿은 하나 이상의 하위 구성 요소가 상위 구성 요소 내부에 포함될 수 있도록 슬롯을 사용합니다.

하위 구성 요소에는 'signal'이라는 소품이 포함되어 있습니다.

부모 컴포넌트의 'parentVal'이라는 데이터를 변경하여 자녀의 시그널 프로포트를 부모 값으로 갱신할 수 있도록 하고 싶습니다.

이것은 간단한 것으로 보이지만, 슬롯을 사용하는 방법을 알 수 없습니다.다음으로 실행 예를 제시하겠습니다.

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});

const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <my-child></my-child>
    <my-child></my-child>
  </my-parent>
</div>

스코프 슬롯을 사용해야 합니다.거의 다 되어가셨습니다.스코프를 작성하는 템플릿을 추가했습니다.

  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>

업데이트된 코드입니다.

const MyParent = Vue.component('my-parent', {
  template: `<div>
               <h3>Parent's Children:</h3>
               <slot :signal="parentVal"></slot>
             </div>`,

  data: function() {
    return {
      parentVal: 'value of parent'
    }
  }
});


const MyChild = Vue.component('my-child', {
  template: '<h3>Showing child {{signal}}</h3>',
  props: ['signal']
});

new Vue({
  el: '#app',
  components: {
    MyParent,
    MyChild
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-parent>
    <template slot-scope="{signal}">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>
</div>

---

Vue 2.6 릴리즈에서는,v-slot일반 슬롯 또는 스코프 슬롯에 사용할 수 있는 디렉티브.이 경우 기본 이름 없는 슬롯을 사용하므로signal를 통해 자산에 액세스 할 수 있습니다.v-slot="{ signal }":

  <my-parent>
    <template v-slot="{ signal }">
      <my-child :signal="signal"></my-child>
      <my-child :signal="signal"></my-child>
    </template>
  </my-parent>

이 기술을 시도해 보세요.

이 예에서는,부모 컴포넌트가 프로포즈를 값 막대와 공유하려고 한다고 가정합니다.

상위 컴포넌트

<parent>
    <template v-slot:default="slotProps">
        // You can access props as object slotObjects {foo"bar"}
        <p>{{slotProps.foo}}</p>
    </template>
<parent>

어린아이

<template>
    <div class="parent">
        <slot :foo="bar" />
    </div>
</template>

이 비디오에서 아이디어를 얻었습니다.

그것이 당신의 임무 수행에 도움이 되었기를 바랍니다.

이 코드를 추가했습니다.<v-data-table></v-data-table>

<template
  v-for="slot in slots"
  v-slot:[`item.${slot}`]="{ item }"
>
  <slot
    :name="slot"
    :item="item"
  />
</template>

그리고 슬롯이라는 소품을 추가했습니다.컴포넌트를 호출하면 다음과 같은 슬롯을 보냅니다.

<my-custom-table-component :slots="['name']">

 <template v-slot:name="{ item }">
  {{ item.first_name + item.last_name}}
 </template>

</my-custom-table-component>

언급URL : https://stackoverflow.com/questions/45180114/how-to-pass-props-using-slots-from-parent-to-child-vuejs