vue多层子组件调用父组件事件

vue中父子组件传值都是用emit和props比较多,但是这个是针对于单层的父子组件,如果是多层的,那就应该换一种了。provide和inject.。

父组件:

export default {
    provide() {
		return {
			fatherMethod: this.popupOpen, // popupOpen是父级的一个事件名
		};
	},
    methods: {
        popupOpen(params) {
            console.log(params)
        }
    }
}

子组件:

export default {
    inject: ["fatherMethod"],
    methods: {
        init() {
            this.fatherMethod(params); // params是可以选择传的参数
        }
    }
}

组件调用组件的方法在Vue2中有两种方法: 1. 通过$emit触发组件传递过来的函数,将组件的数据传递给组件。 在组件中使用this.$emit("组件传递过来的函数","组件数据")来触发组件函数。组件需要在模板中绑定组件的自定义事件,并在methods中定义相应的函数来接收组件传递的数据。 示例代码如下: 组件: ``` <template> <div> <button @click="childFun">组件按钮</button> </div> </template> <script> export default { name: "child", components: {}, data() { return {}; }, created() {}, mounted() {}, methods: { childFun() { this.$emit("fatherMethod", "组件数据"); }, }, }; </script> <style lang='less' scoped> </style> ``` 组件: ``` <template> <div> <child @fatherMethod="parentFun"></child> </div> </template> <script> import Child from "./Child.vue"; export default { name: "parent", components: { Child, }, data() { return {}; }, created() {}, mounted() {}, methods: { parentFun(data) { console.log(data); }, }, }; </script> <style lang='less' scoped> </style> ``` 2. 通过$parent调用组件的方法。 在组件中使用this.$parent.parentFun("组件数据")来调用组件的方法。需要注意的是,这种方法只适用于组件组件之间的直接通信,如果存在多层嵌套,则需要使用$emit来触发事件。 示例代码如下: 组件: ``` <template> <div> <button @click="childFun">组件按钮</button> </div> </template> <script> export default { name: "child", components: {}, data() { return {}; }, created() {}, mounted() {}, methods: { childFun() { this.$parent.parentFun("组件数据"); }, }, }; </script> <style lang='less' scoped> </style> ``` 组件: ``` <template> <div> <child></child> </div> </template> <script> import Child from "./Child.vue"; export default { name: "parent", components: { Child, }, data() { return {}; }, created() {}, mounted() {}, methods: { parentFun(data) { console.log(data); }, }, }; </script> <style lang='less' scoped> </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值