v3.2父子组件的双向数据绑定

1、效果

在子组件输入框中输入父组件也会实时输入
在父组件输入框中输入子组件也会实时输入
且点击父组件的按钮可以打印出input的值

2、实现代码

• 父组件

<template>
  <div class="main">
    <h2>父组件</h2>
    <input v-model="msg" />
    <button @click="handClick">父组件按钮</button>
    <Son2 v-model="msg" />
  </div>
</template>

<script lang="js" setup>
import { ref } from "vue";
import Son2 from "@/components/Son2.vue";
const msg=ref('')
const handClick=()=>{
  console.log('父组件按钮',msg.value)
}
</script>

• 子组件

<template>
  <div class="mainS">
    <h3>子组件</h3>
    <input :value="props.modelValue" @input="onInput" />
  </div>
</template>
<script lang="js" setup>
import { ref } from "vue";
// import { defineProps, defineEmits } from "vue"; 不导入也可使用
// 接收父组件传过来的值规定使用modelValue接收
const props = defineProps(["modelValue"]);
//声明当前组件将要触发一个名为 update:modelValue 的自定义事件
const emit = defineEmits(["update:modelValue"]);
//监听子组件输入事件
const onInput = (e) => {
  const myData = e.target.value;
  //将 myData 变量作为参数传递给事件的监听者
  emit("update:modelValue", myData);
};
</script>

如有错误及不足，望指正！！！