vue3组件通信方式之v-model 父子组件数据同步

       v-model组件身上使用
       第一:相当有给子组件传递props[modelValue] = 10000
       第二:相当于给子组件绑定自定义事件update:modelValue
     

<template>
  <div>
    <h1>父组件v-model:{{pageNo}}---{{pageSize}}</h1>
    <input type="text" v-model="info" />
    <hr />
   
    <!-- 单个直接这样写-->
    <!-- <Child1 v-model="money"></Child1> -->
    <hr />
    <!--  传多个  -->
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
  </div>
</template>

<script setup lang="ts">
//v-model指令:收集表单数据,数据双向绑定
//v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//父亲给子组件数据 props
//子组件给父组件数据 自定义事件
//引入子组件
import Child1 from "./Child1.vue";
import { ref } from "vue";
let info = ref("");

//父亲的数据
let pageNo = ref(1);
let pageSize = ref(3);
</script>

<style scoped>
</style>

<template>
  <div class="child2">
    <h1>同时绑定多个v-model</h1>
    <button @click="handler">pageNo{{ pageNo }}</button>
    <button @click="$emit('update:pageSize', pageSize + 4)">
      pageSize{{ pageSize }}
    </button>
  </div>
</template>

<script setup lang="ts">
// 接收父组件传递的值
let props = defineProps(["pageNo", "pageSize"]);
// 触发事件的名字必须加'update:'前缀。后面跟上父组件绑定的名字
let $emit = defineEmits(["update:pageNo", "update:pageSize"]);
//第一个按钮的事件回调
const handler = () => {
  $emit("update:pageNo", props.pageNo + 3);
};
</script>

<style scoped>
.child2 {
  width: 300px;
  height: 300px;
  background: hotpink;
}
</style>

这样父子组件的数据就是同步的啦