父组件:
<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;
};