Question

我正在尝试从另一个vue组件（父级）访问下面我的vue组件（子级）中的道具。我基本上是在用户从下拉菜单中选择一个选项后，尝试将:selected的值重置为null。

 <template>
    <ul class="dropdown-menu" v-if="showMenu">
      <li v-for="option in options">
        <a href="javascript:void(0)"></a>
      </li>
    </ul>
  </div>
</template>
<script>
import { directive as onClickaway } from "vue-clickaway";
export default {
  directives: {
    onClickaway
  },
  data() {
    return {
      showMenu: false,
      placeholderText: "Please select an item"
    };
  },
  props: {
    selected: {},
    placeholder: [String],
  },
  },

  methods: {
    updateOptions(option) {
      this.showMenu = false;
      this.$emit("input", this.selectedOption);
    },
  }
};

</script>

Answer 1

我在父模板中注意到的第一件事是，您将selected道具硬编码为{}，这意味着它永远不会改变。此外，您可以立即使用以下方法将选定的道具扔掉在孩子的挂接钩中：

  mounted() {
    this.selectedOption = this.selected;
  }

...这意味着即使您从父母那里更改了道具，它也不会做任何事情。

我建议您重构您的代码以使用v-model，这样下拉列表就不会实际存储所选值，而是依赖于父级来存储状态（link to Vue docs）

Parent.vue

<template>
  <dropdown
    // other options skipped for clarity

    v-model="selected"
  ></dropdown>
</template>

<script>
export default {
  data() {
    return {
      selected: undefined
    }
  }
}
</script>

正如您在Vue文档中所看到的，v-model只是传递一个名为value的道具并侦听一个名为input的事件的约定。因此，在您的孩子中，您需要稍微重构。具体来说，我们将摆脱您的中介价值selectedOption：

Child.vue

<template>
  <!-- other divs hidden for clarity -->

  <input
    @click="toggleMenu()"
    v-model="value[attr]" // I am unsure that this is the right choice 
    type="text">

    <ul class="dropdown-menu" v-if="showMenu">
      <li v-for="option in options">
        <a href="javascript:void(0)" @click="updateOption(option)">{{ option[attr] }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      placeholderText: "Please select an item"
    };
  },
  props: {
    value: {}, // changed from selected
    attr: String,
  },

  methods: {
    updateOption(option) {
      this.showMenu = false;
      this.$emit('input', this.selectedOption);
    },
  }
};

</script>

我不确定您的预期行为的唯一地方是您的孩子<input>标记中。您有一个用于输入的v模型，但是当有人在输入中键入内容（例如搜索颜色名称或其他内容）时，您似乎并没有做任何事情。由于键入该输入当前不执行任何操作。将其设置为{strong>看起来像输入但实际上不能键入的<div>可能更有意义。也许...

  <div @click="toggleMenu()">
    {{ value[attr] }}
  </div>

如何从打字稿中访问Vue中组件的道具

1 个答案: