v-model 应该还有一种实现方式是通过watch和事件$emit来实现的

来源：3-9 vue如何自己实现v-model

西岚Silan

2020-02-11

父组件

<template>
<div>
<Test v-model="val"/>
{{val}}
</div>
</template>
<script>
import Test from './Test.vue'
export default {
  data(){
    return {
      val:'test value'
    }
  },
components:{
Test
},
}
</script>

子组件

<template>
<input :value="testVal"  @input="handleChange"/>
</template>
<script>
export default {
props:['val'],
data(){
  return {
    testVal:this.val
  }
},
watch:{
  val(propsVal){
    this.testVal = propsVal
  }
},
methods:{
  handleChange(e){
    this.testVal =e.target.value 
    this.$emit("input",this.testVal)
  }
},
}
</script>

写回答

4回答

双越

2020-02-11

已采纳

这种方式也可以。面试时能说出一种，就可以了。

THEEND0123

双越

老师，您好，不太理解this.$emit("input",this.testVal)在这里的作用，又重新触发input事件，再执行handleChange事件处理函数，那不死循环了？这怎么传回父组件val啊？

2021-02-24

共4条回复

慕粉1470117225

2020-02-29

不用把子组件的props的val改成value吗？v-mode默认是去找名为 value 的 prop 和名为 input 的事件

曾帆

2021-03-08

<template>
  <div>
    <Test v-model="val"/>
    {{val}}
    <button @click="changeVal">父组件改变val的值</button>
  </div>
</template>
<script>
  import Test from './Test.vue'
  export default {
    data(){
      return {
        val:'test value'
      }
    },
    methods: {
      changeVal(){
        this.val="1345645456";
      },
    },
    components:{
      Test
    },
  }
</script>

在父组件中增加一个按钮来修改val的值

如果input输入框有过输入操作之后，点击这个按钮改变val的值，input里面的值并不会改变，这个好像没有实现双向绑定

曾帆

上面同学说的将子组件的val改成value就没问题了

2021-03-08

共1条回复