你現(xiàn)在input-one 和 input-two 綁定的都是value

你一個(gè)是val1 另一個(gè)是val2 props:['val1','val2'] 不就行了

用兩個(gè)model吧，可以不要用v-model，這只是官方提供的一個(gè)語法糖

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

解決這個(gè)問題有幾種方式，可以不需要v-model，通過props接收父組件2個(gè)值，$emit傳遞2個(gè)事件到父組件，也可以強(qiáng)行使用v-model采用 liximomo 的聚合多個(gè)值的方式。聚合方式代碼如下：

<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>

這種情況說明你應(yīng)該聚合你的多個(gè)值, 把他們的整體當(dāng)做一個(gè) model.

<div id='app'>
    <!–– search 是一個(gè)對(duì)象 { 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>`