v-model 最详细解析

大总结   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