老师，帮忙解答下

官网里这段是什么意思，是说把input放在组件里面使用，要写成这样吗？

<body>
 <div id="example-6">
    <custom-input
        v-model="searchText"
    ></custom-input>
</div>
<script>
    Vue.component('custom-input', {
      props: ['value'],
      template: `
      <input  
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
      >
      `
    })
    var vm=new Vue({
      el: '#example-6',
      data: {
        searchText: ''
      }
    })
</script>
</body>

不懂这种写法，为什么要 v-on:input="$emit('input', $event.target.value)" ，这里只是判处一个事件吗？

qq_勿忘初心_H 2020-07-09

源自：项目-城市列表页面开发 1-15 细节优化

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2020-07-09 14:53:06

同学你好，理解的没错，代码修改的也是对的。可以添加如下去测试一下效果：

输入内容，实现双向数据绑定：

另外，v-on:input="$emit('input', $event.target.value)是绑定了一个input事件，input事件是输入时触发的。$emit是触发父组件的自定义事件的，这里就是在输入框输入内容时，触发父组件的自定义事件input事件，然后把当前输入的值$event.target.value传递给父组件。$event.target.value相当于实参，searchText相当于形参，所以输入什么内容，searchText也会跟着改变，实现了双向数据绑定。

上面说的父组件自定义事件，就是v-model实现的，如下：

当我们绑定了一个v-model，实际包含了两个过程。

如下是官方网站对v-model="searchText"的拆分讲解，它的绑定过程是这样的：

上面只是讲解的原理，了解一下就行，不懂也没有关系。按照给出的代码使用即可。

另外，本站的教学服务只包含站内视频内容问题解答、站内习题问题解答、站内作业问题解答、站内测试题问题解答以及站内产品使用问题解答。同学的问题内容与本站视频、习题以及作业等内容无关联，故不包含在本站的教学服务内。但是看同学比较爱学习，所以老师这次破例为你讲解。同学现在还刚入门，掌握的技术还不够全面，基础相对比较薄弱，而官方网站适合有一定基础或者工作了几年的开发人员进行查阅，建议同学合理安排时间，先学习课内知识，等基础有一定提升之后，再去看课外资料哦。

祝学习愉快~

收起回答