用$emit('input',arguments)改变v-model上父组件的值是怎么实现的?

<div id="app">
    <custom-input v-model="father"></custom-input>
    <span>{{father}}</span>
  </div>
  <script>
    Vue.component('custom-input', {
      template: `
          <div @click='add'>add</div>
          `,
      data(){
        return{
          a:1
        }
      },
      methods: {
        add() {
          this.$emit('input',this.a++)
        }
      }
    })
    new Vue({
      el: "#app",
      data: {
        father: 'when you click add ,here will change'
      },
    })
  </script>

如上代码为什么传入参数能直接改变父组件上的father值,v-model内部原理是怎么样的?

这是在input标签上使用v-model
<input v-model="father">  
 等价于
<input v-bind:value="father" v-on:input="father = $event.target.value" >

我写的demo用这个原理解释不通吧,此时更像是

<custom-input v-bind:value="father" v-on:input="father = 子组件传的参数" ></custom-input>
阅读 2.6k
1 个回答
this.$emit('input',this.a++)

触发input事件,cusomter-input监听了input事件,$event.target就是cusomter-input组件实例,value就是a,father被更新

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题