vue3.0中的v-model

目录

一、单个v-model

父组件

子组件

二、多个v-model 

父组件

子组件

总结 

vue2.0中的 v-model

vue3.0中的 v-model

vue2.0中的 sync

---

vue2中的v-model 

在vue3.0中的v-model中和vue2.0的v-model略有不同 先举个双向绑定的例子 之后再来总结

一、单个v-model

效果图 

组件中使用v-model

父组件

<template>
  <div>
    <input type="text" v-model="msg"  >
     <son v-model="msg"></son> 
      <!--上面等价于下面-->
  <!--<son :modelValue="msg" @updata:modelValue="val=>msg=val">></son>-->
  </div>
</template>

<script>
import son from "./son";
import {ref} from 'vue'
export default {
  components: {
    son,
  },
  setup(){
      const msg = ref('奥特曼')
      return {msg}
  }
};
</script>

子组件

<template>
  <div>
    <input type="text" :value="modelValue" @input="number" />
  </div>
</template>

<script>
export default {
  name:'son',
  props: {
    modelValue: {
      default: "",
      type: String,
    },
  },
  setup(props,context) {
    const number = (e)=>{ context.emit('update:modelValue',e.target.value)   };
    return { number };
  },
};
</script>

<style scoped>
</style>

简写

    <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" />

 单个v-model总结

父组件

<son v-model="msg"></son>

等价于 

<son :modelValue="msg" @updata:modelValue="val=>msg=val">></son>

 子组件

 <input type="text" :value="modelValue" @input="number" />

setup函数中没有this 通过第二个参数进行传值 

  setup(props,context) {
    const number = (e)=>{ context.emit('update:modelValue',e.target.value)   };
    return { number };
  },

等价于     如果不用setup 可以通过模板进行传值  

  <inputtype="text":value="modelValue"@input="$emit('update:modelValue',$event.target.value)"/> 

二、多个v-model 

效果图

父组件

<template>
  <div>
    <br>
    父组件
    name： <input type="text" v-model="msg"  > 
    年龄： <input type="text" v-model="age" name="" id="">
    <son v-model="msg" v-model:age="age"></son>
    <!-- <son :modelValue="msg" @update:modelValue="val=>msg=val" :age="age" @update:age="val=>age=val"></son> -->
  </div>
</template>

<script>
import son from "./son";
import {ref} from 'vue'
export default {
  components: {
    son,
  },
  setup(){
      const msg = ref('奥特曼')
      const age = ref('20')
      return {msg,age}
  }
};
</script>

子组件

<template>
  <div>
   子组件 name:  <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" />
    <!-- 子组件 name: <input type="text" :value="modelValue" @input="setName"  />  -->
    年龄: <input type="text" :value="age" @input="$emit('update:age',$event.target.value)"  /> 
    <!-- 年龄: <input type="text" :value="age" @input="setAge" />  -->
  </div>
</template>

<script>
// import {ref} from 'vue'
export default {
  name:'son',
  props: {
    modelValue: {
      default: "",
      type: String,
    },
    age:{
      default: "",
      type: String, 
    }
  },
  setup(props,context) {
    const setName = (e)=>{ context.emit('update:modelValue',e.target.value)   };
    const setAge = (e)=>{ context.emit('update:age',e.target.value)   };
    return { setName,setAge };
  },
};
</script>

总结 

vue2.0中的 v-model

vue2.0中的 v-model

父组件	<son v-model="message"></son> 等价于 <son :value="message" @input="(val)=>message=val"></son>
子组件	<input type="text" :value="value" @input="$emit('input',$event.target.value)"> props: ['value']
特点	只能绑定一次 如果想要多个传值通信  需要.sync修饰符

vue3.0中的 v-model

vue3.0中的 v-model

父：单个v-model	<son v-model="msg"></son>  等价于 <son :modelValue="msg" @updata:modelValue="val=>msg=val">></son>
子	<input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" /> props:['modelValue']
父：多个v-model	<son v-model="msg" v-model:age="age"></son> 等价于 <son :modelValue="msg" @update:modelValue="val=>msg=val" :age="age" @update:age="val=>age=val"></son>
子	<input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" /> <input type="text" :value="age" @input="$emit('update:age',$event.target.value)"  />  props:['modelValue','age']
特点	可以绑定多次 vue3.0 中移去了.sync修饰符  v-bind时不能使用.sync修饰符了，现在它v-model语法合并了

 补充

vue2.0中的 sync

vue2.0中的 sync

单个.sync	<son :abc.sync="message"></son> 等价于 <son message=val" @update:abc=>val=>message=val"></son>
多个.sync	<son :abc.sync="message" :bcd.sync="age">son</son> 等价于 <son :modelValue="msg" @update:modelValue="val=>msg=val" :age="age" @update:age="val=>age=val"></son>