Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)


Posted in Javascript onFebruary 08, 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 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
VUE重点问题总结
Mar 19 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 #Javascript
ajax前台后台跨域请求处理方式
Feb 08 #Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
asm.js使用示例代码
2013/11/28 Javascript
jquery动态添加option示例
2013/12/30 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
python用户评论标签匹配的解决方法
2018/05/31 Python
python使用thrift教程的方法示例
2019/03/21 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python解释器安装教程的方法步骤
2020/07/02 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
乱丢垃圾袋检讨书
2014/10/08 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
接收函
2019/04/22 职场文书
各国货币符号大全
2022/02/17 杂记