如何从 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 从不实际存储所选值，而是依赖父级存储状态 (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>

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

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