Как передать данные в слот в vue2.6 - PullRequest
Новая
       8

Как передать данные в слот в vue2.6

0 голосов
/ 02 июля 2019

Вот иерархия. Компонент A является родительским для Компонента B. Компонент B является родительским для Компонента C.

Компонент А выглядит следующим образом: 

<template>
  <component-b>
    <component-c>
  </component-b>
</template>

Компонент B: 

<template>
  <input type=text/>
  <slot>
  </slot>
</template>

Мне нужен компонент B для передачи данных из его контекста в компонент C. Я не уверен, как это сделать со слотами. Компонент B имеет поле ввода, и когда пользователь вводит данные, мне нужно, чтобы эти данные были привязаны к слоту, что, в свою очередь, заставит компонент C взять эту переменную и использовать ее внутри себя.

Ответы [ 2 ]

2 голосов
/ 02 июля 2019

Посмотрите на ограниченные слоты ~ https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Например, в ComponentB ... 

<template>
  <div>
    <input type="text" v-model="textValue" />
    <slot :text="textValue"></slot>
  </div>
</template>

Здесь я связал свойство данных ComponentB textValue ссвойство в области слотов с именем text.

В ComponentA вы можете получить к нему доступ через директиву v-slot 

<component-b v-slot="{ text }">
  <component-c :some-prop="text" />
</component-b>

Demo ~ https://jsfiddle.net/uj05gqtm/

0 голосов
/ 02 июля 2019

Вы можете передать значение от ребенка.

компонент A 

<template>
  <component-b @inputChange="useValue">
    <component-c :data="valueEmited">
  </component-b>
</template>
<script>
export default {
  data() {
    return {
      valueEmited: '',
    };
  },
  methods: {
    useValue(value) {
      console.log('this is the data emited from the child', value);
      this.valueEmited = value;
    }
  },
}
</script>

компонент b 

<template>
  <input type=text v-model="text" @change="emitThisValue"/>
  <slot>
  </slot>
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    emitThisValue() {
      this.$emit('inputChange', this.text);
    }
  },
}
</script>

Затем вы можете передать значение компоненту C в качестве опоры

https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

...