大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
如需了解老子怎么控制儿子的,传送门: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>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186798.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...