vue.js - 使用带有 select 作为外部组件的 v-model

Question

我想创建一个选择框组件，它具有预定义的标记并且将在我的系统中随处使用。
我在理解 v-model 属性以及它如何同步来自父组件的预定义值和选择框内部值方面遇到困难。

这是我的例子:http://jsfiddle.net/eywraw8t/60103/

我希望我的根组件预选一个值，Selectbox 组件可以更改该值。我的示例按预期工作，但在选择框中使用 $emit 事件感觉我的做法不对。

const Selectbox = {
    props: {
        value: String
    },

    methods: {
        select($event, value) {
        	// The example works but having
            // $event.target.value here seems very wrong
            this.$emit('input', $event.target.value);
        }
    },
    
    template: `
        <div>
            <select :value="value" @change="select($event, value)">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <div>The value is {{ value }}.</div>
        </div>`
};

new Vue({
  el: "#app",
  components: { Selectbox },
  data: () => ({
  	selectboxValue: 1
  }),
  template: `
    <div>
        <selectbox v-model="selectboxValue" />
    </div>
  `
})

body {
  padding: 50px;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
</div>

Answer 1

正如我在上面的评论中提到的，您基本上做对了，但是将一些您并不真正需要的参数传递给了 select 方法。在组件中选择元素的更改事件中，您实际上不必传递任何内容，因为如果您只指定一个函数，事件 对象将自动传递。

在你的模板中:

<select :value="value" @change="select">

以及您的事件处理程序:

select(evt) {
  this.$emit('input', evt.target.value);
}

const Selectbox = {
    props: {
        value: String
    },

    methods: {
        select(evt) {
            this.$emit('input', evt.target.value);
        }
    },
    
    template: `
        <div>
            <select :value="value" @change="select">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <div>The value is {{ value }}.</div>
        </div>`
};

new Vue({
  el: "#app",
  components: { Selectbox },
  data: () => ({
  	selectboxValue: 1
  }),
  template: `
    <div>
        <selectbox v-model="selectboxValue" />
    </div>
  `
})

body {
  padding: 50px;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
</div>

对于像这样的输入组件，我通常喜欢做的是简单地使用计算属性作为组件内部的模型。

<select v-model="selected">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

然后像这样计算:

computed:{
  selected:{
    get() {return this.value},
    set(v) {this.$emit('input', v)}
  }
},

const Selectbox = {
    props: {
        value: String
    },
    computed:{
    	selected:{
      	get() {return this.value},
        set(v) {this.$emit('input', v)}
      }
    },
    template: `
    <div>
        <select v-model="selected">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <div>The value is {{ value }}.</div>
    </div>`
};

new Vue({
  el: "#app",
  components: { Selectbox },
  data: () => ({
  	selectboxValue: 1
  }),
  template: `
  	<div>
    	<selectbox v-model="selectboxValue" />
    </div>
  `
})

body {
  padding: 50px;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
</div>