vue3父子组件传值

时间:2025-04-08 08:04:34
## index.vue <template> 我是父组件 <p>{{ str}}</p> </template> <script setup> import Child from "./"; import { ref } from "vue"; const str= ref(""); // 从子组件传出的值 // 组件的自定义事件 const childChange = (val) => { str.value = val; }; </script> -----------------------------------分割线--------------------------------------------------- ## Child.vue <template> 我是子组件 <el-button @click="handleClick">点我触发自定义事件</el-button> </template> <script setup> // 使用 defineEmits 声明 emits const emit = defineEmits(["change"]); const handleClick = () => { // 必须经过defineEmits声明,不然方法无效! emit("change", "我是经自定义方法传出的值"); }; }); </script>