子组件调用父组件中方法的方法
1.在子组件中用this.$parent.fn()来调用父组件的方法
父组件中:
<script>export default {methods: {parentFn() {console.log('父组件的方法');}}};
</script>
子组件中:
<template><div><div @click="handleClick()">点击</div></div>
</template>
<script>export default {methods: {handleClick() {this.$parent.parentFn()//点击按钮执行父组件中的parentFn方法}}};
</script>
2.在子组件中用this.$emit(‘自定义事件’)向父组件抛发一个自定义事件,父组件监听这个事件
父组件中:
<template><div><Child @childEvent="parentFn()"></Child ></div>
</template>
<script>export default {methods: {parentFn() {console.log('父组件的方法');}}};
</script>
子组件中:
<template><div><div @click="handeClick()">点击</div></div>
</template>
<script>export default {methods: {handeClick() {this.$emit('childEvent')//点击按钮执行父组件中的parentFn方法}}};
</script>
3.将父组件的方法传入子组件中,在子组件里直接调用这个方法
父组件中:
<template><div><Child :parentFn="parentFn"></Child ></div>
</template>
<script>
import Child from '@/components/Child ';
export default {components: {Child },methods: {parentFn() {console.log('父组件的方法');}}};
</script>
子组件中:
<template><div><div @click="handeClick()">点击</div></div>
</template>
<script>export default {props: {parentFn: {type: Function,default: null}},methods: {handeClick() {this.parentFn()//点击按钮执行父组件中的parentFn方法}}};
</script>
子组件调用父组件中方法的方法相关推荐
- js代码 父页面调用子页面中的js方法,子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!! <!--主页面中的JS代码--> <script type="text/javascript"> //调用子页面的方法 ...
- vue中组件之间调用方法——子组件调用父组件的方法 父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
- vue3.0 子组件调用父组件中的方法
在vue2中,子组件调用父组件,直接使用this.$emit()即可. 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周 ...
- vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中 ...
- vue 子组件调用父组件方法、值(父传子);父组件调用子组件方法、值(子传父)。
一.子组件调用父组件方法(父传子-方法) 场景:子组件是弹出框组件.当点击确定时,将新增的值增加到父组件的列表.就要调用父组件的getLIst()方法. 代码: //父组件 利用@子组件方法名=&qu ...
- vue子组件调用父组件内的方法
子组件调用父组件方法 随笔:后面时间充足了再补充 父组件 <template><div><head-title3 ref="headerNews3"& ...
- 使用 this.$parent 子组件调用父组件方法
子组件调用父组件里的方法(报错:Uncaught TypeError: this.$parent.getUserList is not a function) 参考文章链接: https://blog ...
- vue子组件调用父组件方法 回调
子组件调用父组件方法,父组件执行完后,进行回调,代码如下: 子组件this.$emit('change', this.dataList, (loading) => {this.loading = ...
- iframe调用父页面方法_5.1 vue中子组件调用父组件的方法,务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法 通过v-on 监听 和$emit触发来实现: 1.在父组件中 通过v-on 监听 当前实例上的 自定义事件. 2.在子组件 中 通过'$emit'触发 当前实例上 ...
- vue+element 子组件调用父组件失败
项目中遇到vue子组件调用父组件的方法,我写的是this.$emit('search');但是没有成功,查了下说有三种子组件调用父组件的方式: 第一种方法是直接在子组件中通过this.$parent. ...
最新文章
- ACM提交,C++,G++,C,GCC的区别
- java读取src路径下的txt文件_Java程序使用Maven后无法运行?
- Oracle数据库查看用户状态
- 开发可以复用的构件和利用可以复用的构件进行开发
- 通过CSS切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做
- 单片机定时器精准定时_PIC单片机的定时器精准计时的计算
- Pymetrics开源公平性感知机器学习算法Audit AI
- github的使用教程
- 使用ABBYY FineReader进行自动图像预处理
- python list存储方式_python list存储
- 数学公式识别:基于编码-解码模型
- Python基础(8)素数输出
- 学会这4个表达「万能公式」,下次向领导汇报时不再语无伦次
- matlab数据栅格化,新手求卫星降水数据CMORPH_V1.0数据完整处理方法,有matlab打开的代码但是不会处理...
- Alexa技能开发从创建到发布
- 自然语言理解发展历程
- Fatal signal 11 (SIGSEGV) at 0x00000004 (code=1), thread 261 (servicemanager)错误
- UVA11584---区间DP
- JavaScript 详细笔记(狂神说学习笔记)
- 创意休闲手游《急速感染》震撼来袭~
热门文章
- SVN:将分支合并到主干
- java架构师培训班,太完整了!
- VMware Workstation 11.0.0多国语言(含简体中文)+永久激活密钥
- html如何制作悬浮窗,使用js实现悬浮窗效果方法
- java平面内有n个矩形_java有关于M*N矩形求解正方形长方形个数问题
- spring-定时任务
- 全球与中国聚 (3,4-亚乙基二氧噻吩) (PEDOT)市场深度研究分析报告
- android usb 默认mtp,usb修改为默认MTP模式
- MS08_067复现+远程控制
- Nginx的一些配置项,Nginx调优