vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）

一，传参方式bind的方法的使用

例:
1.ui作为一个对象

data() {return {ui:{}//ui作为一个对象}
}

2.初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法

//初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法
init(){this.ui.editDesignTree = this.editDesignTreeFun.bind(this)
},
editDesignTreeFun(val){//方法内写需要的操作
}

3.把ui作为参数传递给子组件

<child :ui='ui'></child>

4.子组件方法中需要调到editDesignTreeFun方法的话

handleNodeTableClick（）{//判断editDesignTree方法是否存在，存在就调整if (this.ui.editDesignTree && typeof this.ui.editDesignTree == 'function') {this.ui.editDesignTree(val)}
}

二，注入provide() {}的使用

1.父组件中， provide() {}跟data平级，提供一个方法

 provide() {return {//isTableNeedShow: this.isTableNeedShow.bind(this),editDesignTree: this.editDesignTreeFun.bind(this)}},

  methods: {editDesignTreeFun（val）{//需要的操作}
}

2.子组件中，可以是孙组件或者嵌套多层的组件

inject这个方法，和data平级

inject: ['editDesignTree'],

使用：

handleNodeTableClick（）{this.editDesignTree(val)
}

三，两者之间的区别和优缺点

1.使用传参方式bind的方法：
优点：简单，子组件会被多个不同的父组件调用的话建议用这个方法，因为如果子组件使用了注入方法的话，但有些父组件页面不需要，就没有provide（）{}提供方法的话，子组件会报错。
缺点：需要把ui（data中自定义的对象），传递下去，子组件才能使用挂载在ui上的方法

2.provide(){}注入方法
优点：不需要传参给子组件，直接穿透所有子组件，不管嵌多少层都能使用
缺点：子组件需要调用父组件上提供的方法的话，父组件必须provide提供方法，如果子组件inject了某方法，但是父组件没有提供，就会报错。

*也可用于传普通参数

vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）相关推荐

vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中 ...
iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue+element 子组件调用父组件失败
项目中遇到vue子组件调用父组件的方法,我写的是this.$emit('search');但是没有成功,查了下说有三种子组件调用父组件的方式: 第一种方法是直接在子组件中通过this.$parent. ...
vue子组件调用父组件内的方法
子组件调用父组件方法随笔:后面时间充足了再补充父组件 <template><div><head-title3 ref="headerNews3"& ...
vue子组件调用父组件方法回调
子组件调用父组件方法,父组件执行完后,进行回调,代码如下: 子组件this.$emit('change', this.dataList, (loading) => {this.loading = ...
vue 子组件调用父组件方法、值（父传子）；父组件调用子组件方法、值（子传父）。
一.子组件调用父组件方法(父传子-方法) 场景:子组件是弹出框组件.当点击确定时,将新增的值增加到父组件的列表.就要调用父组件的getLIst()方法. 代码: //父组件利用@子组件方法名=&qu ...
使用 this.$parent 子组件调用父组件方法
子组件调用父组件里的方法(报错:Uncaught TypeError: this.$parent.getUserList is not a function) 参考文章链接: https://blog ...
vue3.0 子组件调用父组件中的方法
在vue2中,子组件调用父组件,直接使用this.$emit()即可. 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周 ...

vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）

一，传参方式bind的方法的使用

二，注入provide() {}的使用

三，两者之间的区别和优缺点

vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）相关推荐

最新文章

热门文章

vue 多层子组件调用父组件的方法（传参方式bind方法 或 注入 provide() {}方法）

一，传参方式bind的方法的使用

二，注入provide() {}的使用

三，两者之间的区别和优缺点

vue 多层子组件调用父组件的方法（传参方式bind方法 或 注入 provide() {}方法）相关推荐

最新文章

热门文章

vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）

vue 多层子组件调用父组件的方法（传参方式bind方法或注入 provide() {}方法）相关推荐