?如需了解老子怎么控制兒子的，傳送門：https://s-z-q.blog.csdn.net/article/details/119922715?

子組件child.vue?

<template><ul><li> <button @click=" $emit( 'emit', '方式1：傳參給父組件第1個參數', '方式1：傳參給父組件第2個參數', '...' ) " > 方式1：用$emit傳參給父組件（推薦此方式） </button> </li> <br /> <li> <button @click=" emit( '方式2：傳參給父組件第1個參數', '方式2：傳參給父組件第2個參數', '...' ) " > 方式2：用props屬性傳進來的函數（方法Function）傳遞值給父組件 </button> </li> <br /> <li> <button @click=" $parent.emit( '方式3：傳參給父組件第1個參數', '方式3：傳參給父組件第2個參數', '...' ) " > 方式3：用$parent.functionName調用父組件的方法（不推薦，需要依賴父組件初始化完畢該方法） </button> </li> <br /> <li> <button @click=" inject_emit( '方式4：傳參給父組件第1個參數', '方式4：傳參給父組件第2個參數', '...' ) " > 方式4：用inject關聯父組件provide的方法（這種方式比較生僻，子孫組件都可以直接調用，適用于層級較深的組件關系） </button> </li> <br /> <li> <button @click=" window_emit( '方式5：傳參給父組件第1個參數', '方式5：傳參給父組件第2個參數', '...' ) " > 方式5：用window的全局方法（此方式屬于直男模式，呵呵~） </button> </li> <br /> </ul>
</template> 
<script>
export default {inject: ["inject_emit"], //注入方法（子孫組件均可直接調用）props: ["emit"], //傳入方法methods: {window_emit(v1,v2,v3){window.emit(v1,v2,v3)}}
};
</script>

父組件father.vue

<template><div><child @emit="emit" :emit="emit"></child></div>
</template>
<script>
import child from "./child.vue";
export default {components: {child,},created() {window.emit = this.emit;//聲明全局方法（直男模式）},provide() {    return {inject_emit: this.emit,//在這里對外提供方法，在子孫組件中都可以調用};},methods: {emit(v1, v2, v3) {alert(`${v1}\n${v2}\n${v3}`); //彈出子組件的傳參},},
};
</script>

總結

以上是生活随笔為你收集整理的Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。