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

Question

父组件

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

Answer 1

双越 2020-02-11 15:49:24

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

• 慕标8540301 #1

  请问为什么属性名用val就可以了，官方不是建议用value吗？我试了这样没问题，但是不是很明白

• 慕标8540301 #2

  我试了随便换一个名字都可以，这里不是很理解了，没看懂这个机制，希望老师解惑

• 双越 回复 慕标8540301 #3

  这问题中，val 只是 data 或者 props 的名字，跟动态属性 :value 没关系。

点开查看后面1条评论

Answer 2

慕粉1470117225 2020-02-29 15:50:56

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

Answer 3

曾帆 2021-03-08 13:55:07

<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里面的值并不会改变，这个好像没有实现双向绑定

• 曾帆 #1

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

Answer 4

THEEND0123 2021-02-24 09:17:36

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