将数据从下拉列表传递到道具的最佳方式是什么？答案

【问题标题】：What is the best way to pass data from a dropdown list to a prop?将数据从下拉列表传递到道具的最佳方式是什么？
【发布时间】：2021-10-15 17:20:51
【问题描述】：

我正在尝试将下拉列表中的选定值传递给我的道具，但是作为 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}`)]);
            }
          },

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

为了修复您的组件，您应该在代码中考虑和实施一些要点。

当您在子组件中定义道具时，您应该使用 javascript 类型（字符串、数字、布尔值、数组、对象）定义其类型。所以写selected: ''不是正确的方法。请改用selected: String。阅读 Vue 文档了解更多详细信息：

Prop Types

Prop definitions
您应该知道并考虑到在子组件中更改道具是一种反模式，正如他们的文档所述：

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，但不会反过来。这可以防止子组件意外改变父组件的状态，从而使您的应用的数据流更难理解。

所以在你的子组件中：使用一个计算属性作为你的选择框值，并在它改变时发出一个事件。在您的父组件中：在 selectComponent 事件发射上设置一个函数，并在那里更改selected 状态的值。查看以下链接以进一步阅读：

One-Way Data Flow

Implicit parent-child communication

Vue 2 - Mutating props vue-warn

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

【讨论】：