VUEJS 2.0 子组件访问/调用父组件的 方法
来源:互联网 发布:Windows的tmp路径 编辑:程序博客网 时间:2024/05/29 10:21
有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:
子组件:
<template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref="scroll_warpper_ul"> <li class="menu-item" @click="goToFatherDetail(233)"> </li> </ul> </div> <v-loading class="isloading" v-show="hid_show_switch"></v-loading> </div></template><script type="text/ecmascript-6"> export default { methods: { goToFatherDetail (itemId) { // this.$parent.$router.push('goToDetail'); console.log('子组件方法走了' + itemId); this.$emit('refreshbizlines', itemId); /* itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/ } } };</script>
父组件:<template> <div class="main-wrapper"> <div class="tab-wrapper"> <div class="tab-item"> <router-link to="/isShowing" class="table-item-text">正在热映</router-link> </div> <div class="tab-item"> <router-link to="/willShow" class="table-item-text">即将上映</router-link> </div> </div> </div> <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> </div></template><script type="text/ecmascript-6"> export default { methods: { goToDetail (itemId) { console.log('父组件走你:' + itemId); } } };</script>
父组件用 v-on 来做个监测的函数来检测,最终生成的代码是 类似
on: {
"refreshbizlines": function($event) {
_vm.goToDetail(123)
}
}
所以原理就是 子组件 访问 父组件的 检测函数 refreshbizlines ,访问了,则执行 refreshbizline 下面的 函数
goToDetail -- 也就是父组件的
goToDetail函数
注意 父组件 的
v-on:refreshbizlines="goToDetail"
祝你们 编码愉快。
14 0
- VUEJS 2.0 子组件访问/调用父组件的 方法
- 子组件调用父组件的方法
- 子组件调用父组件的方法
- 父组件调用子组件的方法以及子组件调用父组件的方法
- flex子组件调用父组件方法
- vue 父组件调用子组件方法
- reactjs--子组件调用父组件的方法
- reactjs--父组件调用子组件的内部方法
- React.js 子组件调用父组件的方法
- vue关于父组件调用子组件的方法
- angular4中父组件如何调用子组件的方法
- vue 2.0 父组件调用子组件中的方法
- Vue $emit $refs子父组件间方法的调用
- react子组件与父组件之间方法调用
- Angular2父组件类调用子组件方法
- vue2 子组件调用父组件中的方法
- vue 父组件调用子组件方法解决方案
- VueJs的组件化
- 十七、Git使用详解与Github上传代码
- C++中的RTTI机制详解
- Centos6.5下 kibana5.2.2的安装(实践成功)
- Android 7.0 start home activity and send boot completed broadcast
- Python股市数据分析教程——学会它,或可以实现半“智能”炒股 (Part 1)
- VUEJS 2.0 子组件访问/调用父组件的 方法
- for循环中第三个条件i++和++i有区别吗?
- Ubuntu16.04安装Tensorflow存在的问题汇总
- Latex 模版 简历+学术论文
- 第十天2017/04/21(1、函数指针、❤动态库回调❤)
- 指定ES网络地址后无法访问的解决办法
- 分布式——接口调用
- redis常用操作命令总结
- XAMPP安装SSH2扩展