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

Question

父组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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

子组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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