VUEJS 2.0 子组件访问/调用父组件的实例


Posted in Javascript onFebruary 10, 2018

有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:

子组件:

<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 子组件访问/调用父组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
webpack之devtool详解
Feb 10 #Javascript
React组件refs的使用详解
Feb 09 #Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 #Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 #Javascript
JavaScript运行原理分析
Feb 09 #Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 #Javascript
You might like
php 动态执行带有参数的类方法
2009/04/10 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php-fpm配置详解
2014/02/12 PHP
PHP基本语法总结
2014/09/06 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
php实现微信支付之退款功能
2018/05/30 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
Python接口开发实现步骤详解
2020/04/26 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
什么是方法的重载
2013/06/24 面试题
电子商务毕业生求职信
2013/11/10 职场文书
国际金融专业自荐信
2014/07/05 职场文书
见义勇为事迹材料
2014/12/24 职场文书
女性健康讲座主持词
2015/07/04 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python