// 父组件 <template> <Child :val="val"></Child> </template> // 子组件 <script setup> import { defineEmits } from "vue" const props = defineProps({ val: { type: String, default: "" } }) </script>
// 父组件 <template> <Child @success="success"></Child> </template> <script setup> function success (e) { console.log(e) } </script> //子组件 <template> <button @click="handleClick">点击按钮</button> </template> <script setup> import { defineEmits } from "vue" const emits = defineEmits(['success']) function handleClick () { emits("success", "子组件向父组件传递数据") } </script>
// 父组件 <template> <Child ref="RefChildExpose"></Child> <button @click="touchButton">点击使用子组件</button> </template> <script setup> const RefChildExpose = ref(null) function touchButton () { // 使用子组件方法 RefChildExpose.value.show() // 输出子组件属性 console.log(RefChildExpose.value.count) } </script> // 子组件 <script setup> import { defineExpose } from "vue" function show () { console.log('显示') } defineExpose({ show, count: 1 }) </script>