父组件代码

<!-- 父组件代码 --> <template>   <div id="nav">     <AboutVue :value="parentValue" @add="onParentClick" />     <br />     <button @click.stop="onParentClick()">父组件按钮</button>   </div> </template> <script setup> /**  * 引入必要的模块  */ import { ref } from 'vue' import AboutVue from './views/About.vue' /**  * 定义数据  */ const parentValue = ref(0)
/**  * 定义方法  */ function onParentClick (childValue) {   childValue ? (parentValue.value += childValue) : parentValue.value++ } </script> <style scoped> #nav {   text-align: center; } </style>

子组件代码

<!-- 子组件代码 --> <template>   <div class="about">     <h1>{{ props.value }}</h1>     <button @click="onChildClick">子组件按钮</button>   </div> </template> <script setup> /**  * 引入必要的模块  */ import { defineProps, defineEmits } from 'vue' /**  * 定义数据  */ const props = defineProps({ value: { type: Number } }) const emit = defineEmits(['add'])
/**  * 定义方法  */ function onChildClick () {   emit('add', 2) } </script>

 

vue3.2 setup 语法糖中：子组件使用 defineProps接收props , 使用 defineEmits传递给参数给父组件