vue3父子简单传参

父组件：
<template>
  <div class="home">
    <a-button @click="add">加</a-button>
    <div>接收子组件传过来的数据：{{ child }}</div>
    <ChildView :obj="obj" @funFlag="funFlag" @but="but"></ChildView>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, nextTick, toRefs } from 'vue';
import ChildView from '../../../components/testOne/testOne.vue';
const obj = reactive({ count: 0, comments: '' });
const add = () => {
  obj.count++;
};
const child = ref('0');
const funFlag = (val: any) => {
  child.value = val;
};
const but = (e) => {
  console.log(2, e);
  nextTick(() => {
    obj.comments = '';
  });
};
</script>

子组件：
<template>
  <div class="ChildView">
    <a-button @click="sendemit">子传父</a-button>
    <div>子组件接收父组件：{{ parent.count }}</div>
    <a-textarea v-model:value="parent.comments" placeholder="至少填写5个字，最多100个字" :auto-size="{ minRows: 6, maxRows: 6 }"
      :maxlength="100" />
    <a-button @click="but">提交</a-button>
  </div>
</template>

<script lang="tsx" setup>
import {
  ref,
  // watch
  toRefs,
} from 'vue';
const props = defineProps<{
  obj: any;
}>();
const parent: any = ref(props.obj);
// watch(
//   () => props.obj.count,
//   (newValue, _oldValue) => {
//     if (newValue) {
//       parent.value = props.obj;
//     }
//   },
// );
console.log(parent.value.comments, '测试');
const emit = defineEmits(['funFlag', 'but']);
const child = ref(1);
const sendemit = () => {
  emit('funFlag', child.value++);
};
const but = () => {
  emit('but', parent.value.comments);
};
</script>

另外一种和vue2差不多

子组件
<template>
  <div v-if="total > 0" class="dash margin-top">
    <div class="flex justify-end">
      <a-pagination v-model:page-size="pageSize" :current="pagenum" show-size-changer show-quick-jumper :total="total"
        size="small" :show-total="(total) => `共 ${total} 条`" @change="pageChange" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  pagenum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 1,
  },
});
const emits = defineEmits(['change']);

function pageChange(page, pageSize) {
  const data = { page, pageSize };
  emits('change', data);
}
</script>

父组件

<Fenye :total="total" :page-size="pageSize" :pagenum="pagenum" @change="pageChange"></Fenye>
import Fenye from '@/components/testOne/fenYe.vue';
const total = ref(100);
const pageSize = ref(10);
const pagenum = ref(1);
const pageChange = (e) => {
  console.log(111, e);
  pageSize.value = e.pageSize;
  pagenum.value = e.page;
};