大家好，又见面了，我是你们的朋友全栈君。
如需了解老子怎么控制儿子的，传送门：https://s-z-q.blog.csdn.net/article/details/119922715
子组件child.vue
代码语言：javascript复制<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
代码语言：javascript复制<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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186798.html原文链接：https://javaforall.cn
