关于第二种自定义组件写法的疑惑，麻烦老师解答

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>

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

Answer 1

双越 2021-02-25 08:47:18

感觉你对 Vue 的 this.$emit 还不太了解。this.$emit('xxx') 就是触发父组件的事件。

• 提问者 THEEND0123 #1

  老师，我知道this.$emit('xxx')，就是触发对应事件，这里父组件中也没传事件。仅仅存在一个 v-model="val"属性啊！父组件没有多余事件啊。是子组件上绑定了input事件，它的事件处理函数，又$emit触发input事件，这不是死循环了吗？本来不是手动输入的时候就会触发input事件吗？这又调用一次，实在没理解清楚这句代码的作用。

• 提问者 THEEND0123 #2

  是不是这里父组件缺写一个绑定事件啊？应该绑定一个input事件，对应事件处理函数就是，将testVal的值赋值给v-model的val。

• 双越 回复 提问者 THEEND0123 #3

  v-model 已经内置了 input 时间，直接调用即可。否则，这个功能也没法生效啊。

点开查看后面3条评论