将数据从下拉列表传递到prop的最佳方式是什么?

Question

我试图从我的下拉列表中传递所选值，到我的道具，但作为新的Vue我失去了如何让这个我选择的值传递给我的道具，我尝试了许多不同的方法，但它仍然是一个空字符串。我遗漏了什么?

<template>
<FormLayout>
<div class="columns">
<div class="column is-4">
<FormField :for="ff.slug" />
<FormField :for="ff.name" />
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div> 

export default {
fullScreen: true,
name: 'CcRequestForm',
mixins: [BaseForm],

props: {
selected: '',
modelName: {
default: 'CcRequest',
}
},

computed: {
...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),    ccTypesCollection() {
return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
}
},

Answer 1

为了修复组件，您应该在代码中考虑并实现以下几点:

1. 当你在子组件中定义道具时，你应该定义它的类型，使用javascript types(字符串，数字，布尔值，数组，对象)。所以写selected: ''是不正确的。使用selected: String代替。阅读Vue文档获取更多详细信息:

   道具类型

   道具定义

2. 你应该知道并考虑到在子组件中改变prop是一个反模式，如他们的文档所述:

所有的props在子属性和父属性之间形成一个单向向下的绑定:当父属性更新时，它将向下流向子属性，而不是相反。这可以防止子组件意外地改变父组件的状态，这会使你的应用程序的数据流更难以理解。

因此，在子组件中:使用computed属性作为选择框的值，并在它发生变化时触发一个事件。在你的父组件:在selectComponent事件发射上设置一个函数，并在那里改变selected状态的值。请查看以下链接以进一步阅读:

单向数据流

隐式亲子交流

Vue 2 -改变道具Vue -warn

我也实现了正确的代码，以便您更好地理解。在更改下拉列表时打开并检查控制台:https://codesandbox.io/s/vue2-v-model-og0fd?file=/src/App.vue