vue3 组件上使用v-model进行父子间的传值

父组件使用v-model:自定义名称 传递prop,子组件使用$emit(‘update:自定义名称’, 传递的值)返回给父组件值

父组件

<template>
  <chid v-model:title="tit" />
  <button @click="tit = '父亲的值'">父传子</button>
</template>

<script setup>
import chid from "./ChidCom.vue";
import { ref } from "vue";

let tit = ref("父亲的值");
</script>

子组件

<template>
  <div class="">{{ title }}</div>
  <button @click="$emit('update:title', '儿子的值')">子传父</button>
</template>

<script setup>
import { defineProps } from "vue";
defineProps(["title"]);
</script>

绑定多个v-model

父组件

<template>
  <chid v-model:title="tit" v-model:title2="tit2" />
  <button @click="tit = '父亲的值'">父传子</button>
  <button @click="tit2 = '父亲的值2'">父传子2</button>
</template>

<script setup>
import chid from "./ChidCom.vue";
import { ref } from "vue";

let tit = ref("父亲的值");
let tit2 = ref("父亲的值2");
</script>

子组件

<template>
  <div class="">一、{{ title }}</div>
  <div class="">二、{{ title2 }}</div>
  <div>
    <button @click="$emit('update:title', '儿子的值')">子传父</button>
    <button @click="$emit('update:title2', '儿子的值2')">子传父2</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
// 两种方法均可
defineProps(["title", "title2"]);
// defineProps({
//   title: String,
//   title2: String,
// });
defineEmits(["update:title"], ["update:title2"]);
</script>