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","typ