Question

<template slot="item-template" slot-scope="{ item }">
<div class="typeahead-value">{{ item.partnerName }} </div>
<div class="typeahead-info">
<b>Eori:</b> {{ item.partnerEori }} <br>
<b>Tara:</b> {{ item.countryName }}
</div>
</template>

有什么办法，我可以获取值item.partnerName，以便将该值进行验证？还是任何值

Answer 1

目前尚不清楚为什么您无法访问item，但是您应该可以在插槽中访问item。 item是可以通过解构slotProps

来访问的属性

<template v-slot:item-template="{ item }">
  <p>You can access item here</p>
</template>

要将item作为变量传递，可以将其添加到广告位组件中

  <slot
    name="item-template"
    :item="item"
  ></slot>

关于您在评论中的问题

这只是一个基本示例，展示了如何创建和使用插槽组件。

此示例插槽组件 InputItem 接受输入字段（插槽），并在值更新时发出事件

<template>
  <v-container>
    <slot name="field" :inputHandler="update"></slot>
  </v-container>
</template>

<script>
export default {
  props: {
    currentValue: {
      required: true
    }
  },
  methods: {
    update: function(newValue) {
      this.$emit("updated", newValue);
    }
  }
};
</script>

您的消耗组件将是

<template>
  <v-container>
    <InputItem :currentValue="value" @updated="onUpdate">
      <template v-slot:field="{ inputHandler }">
        <v-text-field 
          :value="value" 
          @input="inputHandler"
        ></v-text-field>
      </template>
    </InputItem>
  </v-container>
</template>

<script>
import InputItem from "../../components/InputItem";

export default {
  components: {
    InputItem
  },
  data: function() {
    return {
      value: "not empty"
    };
  },
  methods: {
    onUpdate: function(newValue) {
      this.value = newValue;
    }
  }
};
</script>

所提供的示例HTML代码使用Vuetify元素，但我希望这是可以的。

从slot-scope获取数据

1 个答案: