VUEJS 2.0 子组件访问/调用父组件的实例
2018-02-10 08:40
706 查看
有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:
子组件:
<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); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> } } }; </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); } }<strong> }; </script></strong>
父组件用 v-on 来做个监测的函数来检测,最终生成的代码是 类似
on: { "refreshbizlines": function($event) { _vm.goToDetail(123) } }
所以原理就是 子组件 访问 父组件的 检测函数 refreshbizlines ,访问了,则执行 refreshbizline 下面的 函数
goToDetail -- 也就是父组件的
goToDetail函数
注意 父组件 的
v-on:refreshbizlines="goToDetail"
一定要放在 你父组件调用子组件的 模块名上。
祝你们 编码愉快。
以上这篇VUEJS 2.0 子组件访问/调用父组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- VUEJS 2.0 子组件访问/调用父组件的 方法
- Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
- 关于 com 组件 还有 一些 mfc 调用的实例 很实用的博客
- Vue组件实例间的直接访问
- VUE2.0+Element-UI+Echarts封装的组件实例
- windows 2008 下C#调用office组件访问拒绝的解决方法(failed du
- OC 继承子类对象调用方法机制 子类对象访问父类中的实例变量
- java 程序加载过程---3--类中申明同时申明类的静态对象 创建类的实例 访问类的静态变量 调用类的静态方法 使用反射方法 初始化类的子类对象 直接使用java.exe 调用某个类
- ASP.Net C#2.0全能数据库组件 (含下载实例源码地址)
- vue2.0组件通信各种情况总结与实例分析
- ASP.Net C#2.0全能数据库组件 (含下载实例源码地址)
- 访问和调用外部组件
- Vue2.0 多 Tab切换组件的封装实例
- Vue组件实例间的直接访问
- iview2.0 父组件访问子组件 方法
- JNI中在被调用的C/C++函数中如何访问Java程序中的类,并编写应用实例
- Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
- vue 2.0 父组件调用子组件中的方法
- Effective Objective-C 2.0 — 第七条:在对象内部尽量直接访问实例变量