vue3组件v-model 的用法

父组件
<template>
  <h1>{{ num }}</h1>
  <child-event v-model="num"></child-event>
</template> 

<script lang="ts" setup>
import { ref } from "vue";
import childEvent from "./child.vue"

let num = ref(1000)
</script>


子组件

<template>
  <div>
      <div>我是子组件</div>
      <button @click="handler1">点击增加100</button>
  </div>
</template>

<script setup lang="ts">
let emits = defineEmits(['update:modelValue'])
let props = defineProps(['modelValue'])
const handler1 = () => {
  emits('update:modelValue', props.modelValue + 100)
  // console.info(props)
}
</script>

父组件
<template>
  <div>我是父组件</div>
  <pre>我是父子组件同步的数据：{{ pageNo }} --- {{ pageSize }}</pre>
  <Child v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child>
</template>

<script setup>
import { ref } from "vue";
import Child from "./child.vue";

const pageNo = ref(10000);
const pageSize = ref('hello vue!')

</script>



子组件

<template>
  <div>我是子组件</div>
  <pre>父组件给我的数据：{{ pageNo }} --- {{ pageSize }}</pre>
  <button @click="() => $emits('update:pageNo', pageNo + 1000)">点我改变接收到的数据1</button>
  <button @click="() => $emits('update:pageSize', 'hello world!')">点我改变接收到的数据2</button>
</template>

<script setup>
const props = defineProps(['pageNo', 'pageSize'])
console.log(props)
const $emits = defineEmits(['update:pageNo', 'update:pageSize'])
</script>