Question

我试图在同一vue文件中多次重用searchselect：

<SearchSelect :options="item in brandList"></SearchSelect>

<SearchSelect :options="item in modelTypes"></SearchSelect>



brandList: [
    { value: "A", text: "A" },
    { value: "B", text: "B" },
    { value: "C", text: "C" },
    { value: "D", text: "D" }
  ],

在我的searchselect.vue中，我写为：

<template>
  <div>
    <!-- object value -->
    <model-select
      :options="options"
      v-model="item"
      placeholder="select item"
    ></model-select>
  </div>
</template>



export default {
   props: ["itemOption"],
   data() {
      return {
        options: [],
     item: {
       value: "",
       text: ""
     }
   };
},

有人可以指导我从vue.file数据传递值时我做错了什么吗？

Answer 1

乍一看，您似乎为道具使用了错误的名称。

在SearchSelect中，如下定义prop。

export default {
    props: {
       options: Array
    },
    data: () => ({
        item: { value: '', text: '' }
    }),
}

prop的名称是您用来将brandList和modelTypes绑定到组件的名称，您将其称为：

<SearchSelect :options="item in brandList"></SearchSelect>

请注意，options与上方组件中道具的名称匹配

可重复使用的Vue组件道具传递

1 个答案: