Question

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

以下是我的示例：http://jsfiddle.net/eywraw8t/60103/

我希望我的根组件预先选择一个Selectbox组件可以更改的值。我的示例按预期工作，但在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元素的change事件中，您不必传递任何内容，因为如果您只是指定一个函数，event对象将自动传递。

在你的模板中：

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

你的事件处理程序：

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

＆＃13;

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>
  `
})

＆＃13;

body {
  padding: 50px;
}

label {
  display: block;
}

＆＃13;

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

＆＃13;

我通常喜欢这样的输入组件，只是在内部使用计算属性作为组件的模型。

<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)}
  }
},

＆＃13;

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>
  `
})

＆＃13;

body {
  padding: 50px;
}

label {
  display: block;
}

＆＃13;

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

＆＃13;

使用v-model和select作为外部组件

1 个答案: