62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
|
<script setup lang="tsx">
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
|
|||
|
|
defineProps({
|
|||
|
|
peiqi: Number,
|
|||
|
|
modelValue: Number,
|
|||
|
|
timestamp: String,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:modelValue', value: number): void;
|
|||
|
|
(e: 'update:peiqi123', value: number): void;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
// 定义子组件的值，传给父组件
|
|||
|
|
const childCount = ref(99);
|
|||
|
|
|
|||
|
|
// 定义子组件的值，传给父组件 --- 2
|
|||
|
|
const childCount2 = ref(888);
|
|||
|
|
|
|||
|
|
/* 修改值 */
|
|||
|
|
const onClick = () => {
|
|||
|
|
childCount.value++;
|
|||
|
|
childCount2.value++;
|
|||
|
|
|
|||
|
|
// 第一种，子传父
|
|||
|
|
emit('update:modelValue', childCount.value);
|
|||
|
|
// 第二种，子传父
|
|||
|
|
emit('update:peiqi123', childCount2.value);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="about">
|
|||
|
|
<h1>子页面</h1>
|
|||
|
|
|
|||
|
|
<p>childCount：{{ childCount }}</p>
|
|||
|
|
<p>childCount2：{{ childCount2 }}</p>
|
|||
|
|
<p @click="onClick">时间戳：{{ timestamp }}</p>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
@media (min-width: 1024px) {
|
|||
|
|
.about {
|
|||
|
|
min-height: 50vh;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: purple;
|
|||
|
|
}
|
|||
|
|
</style>
|