vue2与vue3使用v-model对组件进行双向绑定

vue2 中 在组件上面使用 v-model="count" 等价于 :value="count" @input="count = $event"

所以 v-model 就是父组件向子组件传了个 value 字段的值，子组件使用 props 定义 value 字段， 就可以在子组件使用 value 读取这个值；子组件使用 $emit(‘input’,值) 就可以改变 v-model 的值

父组件

<template>
  <div id="app">
    <Count v-model="count" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 0,
    }
  },
  components: { 
        Count: () => import("./components/Count.vue");
 },
}
</script>

<style></style>

<script/>

子组件

<template>
  <div>
    我是子组件文字{{value}}
    <button @click="$emit('input', 1)">加一</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: number,
      default: 0,
    },
  },
}
</script>

vue3 中在组件上面使用 v-model="count" 等价于 :modelValue="count" @update:count="count = $event"

父组件

<script setup lang="ts">
import { ref } from 'vue';
import TsxSetup from '../component/TsxSetup/index.vue'

const count = ref(0);
const val = ref('默认modelValue');
</script>

<template>
  <div>
    <TsxSetup v-model:count="count" v-model="val" />
  </div>
</template>

<style>
</style>

子组件

<template>
    <component :is="render()"></component>
</template>

<script setup lang="tsx">
    const props = defineProps<{
        count: number;
        modelValue: string;
    }>();
    const emits = defineEmits(['update:count', 'update:modelValue'])
    const render = () => {
        return (
            <div>
                <div class="content">count is {props.count} __ {props.modelValue}</div>
                <div>
                    <button
                    onClick={() => {
                        emits("update:count", props.count + 1);
                        emits("update:modelValue", '子组件');
                    }}
                    >
                    add
                    </button>
                </div>
            </div>
        )
    }

</script>

<style lang="scss" scoped>
.content {
  color: red;
}
</style>