vue3 组件使用v-model

父组件  语法糖

<template>
  <div>
    <Son v-model="num" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./son.vue";
export default {
  components: {
    Son,
  },
  setup() {
    const num = ref(0);

    return {
      num,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

子组件 

默认v-model绑定的数据在子组件读取需要使用 modelValue来接收 子组件发射事件默认叫update:modelValue 

<template>
  <div>
    {{ modelValue }}
    <button @click="change">改变</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
    },
  },
  emits: ["update:modelValue"],
  setup(props, ctx) {
    const change = () => {
      ctx.emit("update:modelValue", 5);
    };
    return { change };
  },
};
</script>

<style lang="scss" scoped>
</style>

绑定多个v-model

父组件

<template>
  <div>
    <Son v-model="num" v-model:name="name" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./son.vue";
export default {
  components: {
    Son,
  },
  setup() {
    const num = ref(0);
    const name = ref("zhangsan");
    return {
      num,
      name,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

子组件

<template>
  <div>
    {{ modelValue }}
    <button @click="change">改变数字</button>
    {{ name }}
    <button @click="changeName">改变名字</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
    },
    name: {
      type: String,
    },
  },
  emits: ["update:modelValue", "update:name"],
  setup(props, ctx) {
    const change = () => {
      ctx.emit("update:modelValue", 5);
    };
    const changeName = () => {
      ctx.emit("update:name", "lisi");
    };
    return { change, changeName };
  },
};
</script>

<style lang="scss" scoped>
</style>

 

父组件 使用自定义

<template>
  <div>
    <Son :modelValue="num" @update:modelValue="(e) => num = e" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./son.vue";
export default {
  components: {
    Son,
  },
  setup() {
    const num = ref(0);

    return {
      num,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

子组件

<template>
  <div>
    {{ modelValue }}
    <button @click="change">改变</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
    },
  },
  emits: ["update:modelValue"],
  setup(props, ctx) {
    const change = () => {
      ctx.emit("update:modelValue", 5);
    };
    return { change };
  },
};
</script>

<style lang="scss" scoped>
</style>