Question

这是层次结构。组件A是组件B的父级。组件B是组件C的父级。

组件A看起来像这样：

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

组件B：

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

我需要组件B将数据从其上下文传递到组件C。我不确定如何使用插槽来做到这一点。组件B有一个输入框，随着用户的输入，我需要将数据绑定到插槽，这又将导致组件C获取该变量并在其内部使用。

Answer 1

看看范围内的广告位〜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>

演示〜https://jsfiddle.net/uj05gqtm/

Answer 2

您可以从子项中发出值。

组件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>

然后您可以将值作为prop传递给组件C。

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

如何将数据传递到vue2.6中的插槽

2 个答案: