vue的v-model以及封装自己的表单组件_vue v-model封装组件

v-model通常用于表单的双向数据绑定实质上是一个语法糖

<template>
    <div>
      <input type="text" v-model="name"/>
      //原理
      <input type="text" :value="name" @input="name=$event.target.value"/>
    <div/>
<template/>
<script>
export default {
    data:{
        return {
            name:'Jeck'
        }
    }
}
<script/>

封装简单的双向绑定的组件

//组件myinput
<template>
    <div>
      <div class="lable">{{lable}}<lable/>
      <input :type="type" :value="modelValue" @input="$emit('update:modelValue',evt.target.value)"/>  //注意value必须绑定modelValue  事件名必须为update:modelValue  
    <div/>
<template/>
<script>
export default {
	props:["modelValue","lable","type"]
}
<script/>
//使用
<Myinput v-model="value"/>  
//原理  这里之所以可以用v-model来绑定是应为Vue在解析v-model时将转换为
<Myinput :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>

v-model的参数

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。可以通过给 v-model 指定一个参数来更改这些名字：

//组件MyComponent
<template>
    <div>
      <div class="lable">{{lable}}<lable/>
      <input :type="type" :value="title" @input="$emit('update:title',evt.target.value)"/>  //注意value必须绑定title 
    <div/>
<template/>
<script>
export default {
	props:["title","lable","type"]
}
<script/>
//使用
<MyComponent v-model:title="bookTitle" />

在一个组件中可以有多个 v-model 绑定

//组件MyComponent
<template>
    <div>
      <div class="lable">{{lable}}<lable/>
      <input :type="type" :value="name1" @input="$emit('update:name1',evt.target.value)"/>  //注意value必须绑定name1  事件名必须为update:name1
      <input :type="type" :value="name2" @input="$emit('update:name2',evt.target.value)"/>  //注意value必须绑定name2  事件名必须为update:name2
    <div/>
<template/>
<script>
export default {
	props:["name1","name2","lable","type"]
}
<script/>
//使用
<MyComponent v-model:name1="Jeck"  v-model:name2="Ros" />