我想创建一个选择框组件,它有一个预定义的标记,可以在我的系统中的任何地方使用。
我在理解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: …Run Code Online (Sandbox Code Playgroud)