子組件調用父函式 - daniel-qa/Vue GitHub Wiki

子組件調用父函式

代码 作用
<Child :onCall="handleCall" /> 把 handleCall 这个函数传递给 Child.vue
const props = defineProps({ onCall: Function }); 在 Child.vue 里接收 onCall
props.onCall(); 在子组件里调用 handleCall()
props.onCall("Hello"); 调用 handleCall 并传递 "Hello" 作为参数

:前面是子組件的函式名稱，後面是父組件的函式名稱

範例1: 子組件直接調用

  • Parent.vue（父组件）
<template>
    <div>
        <h2>父组件</h2>
        <Child :onCall="handleCall" />
    </div>
</template>

<script setup>
import Child from "./Child.vue";

const handleCall = () => {
    alert("父组件的函数被调用了！");
};
</script>
  • Child.vue（子组件）
<template>
    <h3>子组件</h3>
</template>

<script setup>
import { defineProps, onMounted } from "vue";

// 定义 props，并确保 `onCall` 是一个函数
const props = defineProps({
    onCall: {
        type: Function,
        required: false,  // 允许 `onCall` 为空
        default: () => {} // 避免 `undefined`
    }
});

// 组件加载时调用 `onCall`
onMounted(() => {
    props.onCall();  // ✅ 现在不会报错
});
</script>
  • 如果要調兩個函式
<h2>父组件</h2>
<!-- 传递两个函数给子组件 -->
<Child :sendMessage="handleCall" :showAlert="handleAlert" />

範例2: 子組件調用父 click 函式

這裡是一個最簡單的範例，展示 如何在子組件 (Child.vue) 中調用從父組件 (Parent.vue) 傳入的函數。

1. 父組件 (Parent.vue)

父組件定義一個函數 handleClick，並將它作為 prop 傳遞給子組件：

<template>
    <div>
        <h2>父組件</h2>
        <Child @click="handleClick" />
    </div>
</template>

<script setup>
import Child from "./Child.vue";

const handleClick = () => {
    alert("父組件的函數被調用了！");
};
</script>

2. 子組件 (Child.vue)

子組件 Child.vue 接收 props 並調用 props.onClick()：

<template>
    <button @click="props.onClick">點擊我</button>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
    onClick: Function
});
</script>
  • 運行結果

當你點擊「點擊我」按鈕時，會彈出提示：

父組件的函數被調用了！

重點解析

  • 父組件 (Parent.vue)

handleClick 是一個函數，並傳遞給子組件 。

  • 子組件 (Child.vue)

defineProps 接收 onClick，並在 @click 事件中調用 props.onClick()。

這是最簡單的 prop 傳遞函數的方式，讓子組件可以執行父組件的函數！

⚠️ **GitHub.com Fallback** ⚠️