v-model 最详细解析

2021-09-21 11:59:06 阅读：273 来源： 互联网

标签：searchText value 详细组件 input model 解析 event

大总结 v-model ：“searchText”就是

:value="searchText" @input="searchText = $event.target.value"

或者

:model-value="searchText"
@update:model-value="searchText = $event"

总之，v-model就是为了监听input的值变化时，把data：searchText 修改了，再绑定：searchText然后把input的value 修改。

什么是v-model双向绑定？v-model本质上是一个语法糖。：value=“aaa” 里：value用作改变input里面的值。

要注意，v-model用在input和用在组件上是不一样的。

当用在组件上时，v-model 则会这样：

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

上面的代码可以简写成这样：

<custom-input v-model="searchText"></custom-input>

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

工作原理：当子组件（custom-input）里的input被修改时，触发 @input="$emit('update:modelValue', $event.target.value)"，父组件监听到@update:model-value事情后，触发searchText = $event，（其中$event=$event.target.value ）。父组件通过 :model-value="searchText"获取到了变量searchText再传入子组件，子组件再通过props: ['modelValue']接受，最后:value="modelValue"成功修改input。

总之：先是 input触发事件，父组件监听到事件，再修改父组件的date：searchTex，父组件再把searchTex传入子组件，子组件才获取prop，然后：v-bind：prop 修改input值。

还有一点要注意：

$emit('enlargeText', 0.1)

当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post ... @enlarge-text=" 1 += $event"></blog-post>

或者，如果这个事件处理函数是一个方法

<blog-post ... @enlarge-text="onEnlargeText"></blog-post>

那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText(enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

总结：父组件接受子组件$emit('enlargeText', 0.1) 第二个参数时，在组件上可以通过$event拿到，也可以在触发的方法的第一个参数里拿到 method（0.1 ）。

标签：searchText,value,详细,组件,input,model,解析,event
来源： https://blog.csdn.net/weixin_43416349/article/details/120399615

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

v-model 最详细解析