VUE3----数据双向绑定（v-model）

单个数据双向绑定

父组件

<template>
  <div>
    <h2>父组件</h2>
    <HelloWorld v-model="name"></HelloWorld>
    <h2>子组件传递来的数据：{{name}}</h2>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";
import {ref} from "vue";
export default {
  components:{HelloWorld},
  name: 'App',
  setup(){
    const name=ref(null)
    return {
      name,
    }
  }
}
</script>

子组件

<template>
  <div class="hello">
    <h2>子组件</h2>
    <input type="text" v-model="newValue">
  </div>
</template>

<script>
import {computed} from "vue";

export default {
  name: 'HelloWorld',
  props:{
    modelValue:{
      type:String,
      default:''
    }
  },
  setup(props, context){
    const newValue=computed({
      get:function(){
        return props.modelValue
      },
      set:function(value){
        context.emit('update:modelValue',value)
      }
    })

    return{
      newValue
    }
  }
}
</script>

多个 v-model 数据双向绑定

父组件

<template>
  <div>
    <h2>父组件</h2>
    <HelloWorld v-model:name="name" v-model:age="age"></HelloWorld>
    <h2>子组件传递来的数据：{{name}}==={{age}}</h2>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";
import {ref} from "vue";
export default {
  components:{HelloWorld},
  name: 'App',
  setup(){
    const name=ref(null)
    const age=ref(null)
    return {
      name,
      age
    }
  }
}
</script>

子组件

<template>
  <div class="hello">
    <h2>子组件</h2>
    <input type="text" v-model="newName">
    <input type="text" v-model="newAge">
  </div>
</template>

<script>
import {computed} from "vue";

export default {
  name: 'HelloWorld',
  props:{
    name:{
      type:String,
      default:''
    },
    age:{
      type:Number,
      default:30
    }
  },
  emits:['update:name','update:age'],
  setup(props, context){
    const newName=computed({
      get:function(){
        return props.name
      },
      set:function(value){
        context.emit('update:name',value)
      }
    })
    const newAge=computed({
      get:function(){
        return props.age
      },
      set:function(value){
        context.emit('update:age',Number(value))
      }
    })

    return{
      newName,
      newAge
    }
  }
}
</script>