vue3自定义组件使用v-model实现双向数据绑定

一、自定义组件使用 v-model实现双向数据绑定

1.1、单个 v- model 数据绑定
默认情况下,组件上的 v- model 便用 modelvalue 作为 prop 和 update : modelvalu 作为事件。

<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)"
    >
  `
})

我们可以通过向 v - model 传递参数来修改这些名称:

<my-component  v-model : foo =" bar "></my-component>

在本例中,子组件将需要一 个 foo prop并发出 update : foo 要同步的事件:

   const app = Vue.createApp({})
     app.component ('my-component',{ 
       props:{ 
          foo : String 
       },
    template:` < input  type ="text" :value =" foo"
       @input ="&emit ('update : foo', &event.target.value )">`
     })

1.2、多个v- model 绑定
通过利用以特定 prop 和事件为目标的能力,正如我们们之前在 v-model参数中所学的那样,我们现在可以在单个组件实例上创建多个 v - model 绑定。
每个 v-model 将同步到不同的 prop ,而不需要在组件中添加额外的选项。

 <user-name  v-model:first-name ="firstName" v-model:last-name ="lastName" ></user-name >

    const app = Vue.createApp({})
     app.component ('user-name',{ 
       props:{ 
          firstName : String,
          lastName : String,
       },
    template:` < input   type ="text" :value ="firstName"
        @input ="&emit ('update : firstName', &event.target.value )"> <br/>
        < input    type ="text" :value ="lastName"
        @input ="&emit ('update : lastName', &event.target.value )">
`
     })