Vue——自定义v-model 数据双向绑定

Vue2

//父组件
<template>
  <div>
  	//v-model 相当于增加了:value 和 @input 属性
    <childrenComp v-model="text"></childrenComp>
  </div>
</template>

<script>
import childrenComp from '@/components/childrenComp.vue'

export default {
  components: { childrenComp },
  data() {
    return {
      text: ""
    }
  }
}
</script>

//子组件
<template>
  <div>
    <span>{{value}}</span>
    <button @click="changeValue">修改绑定值</button>
  </div>
</template>

<script>
  export default {
    props:["value"],
    methods:{
      changeValue(){
        this.$emit("input","onchange value")
      }
    }
 }
</script>

Vue3

//父组件
<script setup lang="ts">
import { ref } from 'vue';
import ChildrenComp from './ChildrenComp.vue'

const text = ref("")
</script>

<template>
  <div>
  	//v-model 相当于增加了 :modelValue.sync 属性
  	//v-model:value 相当于 :value.sync
    <ChildrenComp v-model="text"></ChildrenComp>
  </div>
</template>

//子组件
<script setup lang="ts">
import { defineProps } from 'vue'

defineProps(["modelValue"])
</script>

<template>
  <div>
    <span>{{$props.modelValue}}</span>
    <button @click="$emit('update:modelValue','onchange value')">修改绑定值</button>
  </div>
</template>