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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
vue实现数字滚动效果
Jun 29 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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冒泡算法详解(递归实现)
2014/11/10 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python 性能提升的几种方法
2016/07/15 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python安装selenium包详细过程
2019/07/23 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
python3中rank函数的用法
2019/11/27 Python
pytorch forward两个参数实例
2020/01/17 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python如何对链表操作
2020/10/10 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python