vue自定义组件中有2个<input>输入框，使用v-model该如何绑定？

Question

我在Vue component中定义了2个<input>输入框，我想将这两个输入框的value用v-model分别绑定到父组件，但是我只找到了绑定一个的方法，分别绑定2个该如何操作呢？

如下代码不管在哪个输入框输入内容，searchText的值都会改变，相当于两个<input>的值绑定到了一个searchText上，用v-model如何将它们分开绑定呢？

<div id='app'>
    <my-component v-model='searchText'></my-component>
    <p>{{ searchText }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    

<script>
    Vue.component("my-component", {
        props:['value'],
        template:`
            <div>
                <label for='input-one'>
                    name：
                    <input id='input-one'
                        v-bind:value='value'
                        v-on:input="$emit('input', $event.target.value)""></input>
                </label>
                <label for='input-two'>
                    age：
                    <input id='input-two'
                        v-bind:value='value'
                        v-on:input="$emit('input', $event.target.value)""></input>
                </label>
            </div>`
    })
    var app = new Vue({
        el:'#app',
        data:{
            searchText:'start edit'
        }
    })

Answer 1

解决这个问题有几种方式，可以不需要v-model，通过props接收父组件2个值，$emit传递2个事件到父组件，也可以强行使用v-model采用 liximomo 的聚合多个值的方式。聚合方式代码如下：

<div id="app">
    <my-component v-model="search"></my-component>
    <p>name: {{ search.name }}</p>
    <p>age : {{ search.age }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    Vue.component('my-component',{
        props: ['value'],
        template:`
            <div>
              <label for='input-one'>
                  name：
                  <input id='input-one'
                      v-bind:value='value.name'
                      v-on:input="$emit('input', {name: $event.target.value, age: value.age})""></input>
              </label>
              <label for='input-two'>
                  age：
                  <input id='input-two'
                      v-bind:value='value.age'
                      v-on:input="$emit('input', {name: value.name, age: $event.target.value})""></input>
              </label>
            </div>`

    })

    var app = new Vue({
        el: '#app',
        data: {
            search: {
                name:'edit name',
                age:18
            }
        }
    })
</script>

Answer 2

用两个model吧，可以不要用v-model，这只是官方提供的一个语法糖

<div id='app'>
    <my-component model1='searchText1' model2='searchText2' @input1="val=>searchText1=val" @input2="val=>searchText2=val"></my-component>
    <p>{{ searchText }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    

<script>
    Vue.component("my-component", {
        props:['model1', 'model2'],
        template:`
            <div>
                <label for='input-one'>
                    name：
                    <input id='input-one'
                        v-bind:value='model1'
                        v-on:input="$emit('input1', $event.target.value)""></input>
                </label>
                <label for='input-two'>
                    age：
                    <input id='input-two'
                        v-bind:value='model2'
                        v-on:input="$emit('input2', $event.target.value)""></input>
                </label>
            </div>`
    })
    var app = new Vue({
        el:'#app',
        data:{
            searchText:'start edit'
        }
    })

Answer 3

你现在input-one 和 input-two 绑定的都是value

你一个是val1 另一个是val2 props:['val1','val2'] 不就行了

Answer 4

这种情况说明你应该聚合你的多个值, 把他们的整体当做一个 model.

<div id='app'>
    <!–– search 是一个对象 { name: '', age: '' } ––>
    <my-component v-model='search'></my-component>
    <p>{{ searchText }}</p>
</div>

props:['value'],
template:`
    <div>
      <label for='input-one'>
          name：
          <input id='input-one'
              v-bind:value='value.name'
              v-on:input="$emit('input', { ... value, name: $event.target.value})""></input>
      </label>
      <label for='input-two'>
          age：
          <input id='input-two'
              v-bind:value='value.age'
              v-on:input="$emit('input', { ... value, age: $event.target.value})""></input>
      </label>
    </div>`

Answer 5

怎么去动态循环绑定多个input的model啊