Vue 中父子組件如何相互調用方法

在 Vue 中，父子組件可以通過以下方法相互調用方法：

父組件調用子組件方法

• 通過 props: 父組件向子組件傳遞一個 prop，該 prop 是一個函數，子組件可以調用它來觸發父組件的方法。
• 通過 refs: 父組件通過 ref 獲取子組件的實例，然后可以直接調用子組件的方法。

子組件調用父組件方法

• 通過 emit: 子組件使用 $emit 方法觸發一個自定義事件，父組件使用 v-on 綁定該事件并執行相應的函數。
• 通過 provide/inject: 父組件通過 provide 提供一個函數，子組件通過 inject 注入該函數，然后可以直接調用該函數。

具體步驟

父組件調用子組件方法

使用 props：

<!-- 父組件 -->
<template><childcomponent :my-method="myMethod"></childcomponent></template><script>export default {methods: {myMethod() {console.log("父組件的方法被調用了");},},};
</script><!-- 子組件 --><template><button>觸發父組件的方法</button>
</template><script>export default {props: ['myMethod'],};
</script>

使用 refs：

<!-- 父組件 -->
<template><childcomponent ref="child"></childcomponent></template><script>export default {mounted() {this.$refs.child.myMethod(); // 調用子組件的方法},};
</script><!-- 子組件 --><template><button>觸發父組件的方法</button>
</template><script>export default {methods: {myMethod() {console.log("父組件的方法被調用了");},},};
</script>

子組件調用父組件方法

使用 emit：

<!-- 子組件 -->
<template><button>觸發父組件的事件</button>
</template><script>export default {methods: {triggerEvent() {this.$emit('my-event'); // 觸發父組件的事件},},};
</script><!-- 父組件 --><template><childcomponent></childcomponent></template><script>export default {methods: {myMethod() {console.log("子組件觸發了父組件的事件");},},};
</script>

使用 provide/inject：

<!-- 父組件 -->
<template><childcomponent></childcomponent></template><script>export default {provide() {return {myMethod: () => {console.log("父組件的方法被調用了");},};},};
</script><!-- 子組件 --><template><button>觸發父組件的方法</button>
</template><script>export default {inject: ['myMethod'],};
</script>