如何从 typescript 访问 vue 中组件的 props

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以使 Dropdown 从不实际存储所选值，而是依赖父级存储 state （ 链接到 Vue 文档）。

父.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的 prop 并监听名为input的事件。 所以在你的孩子身上，你需要稍微重构一下。 具体来说，我们将摆脱您的中间值selectedOption ：

孩子.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>

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

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