VUEJS 2.0 子组件访问/调用父组件的实例
时间:2019-04-13
本文章向大家介绍VUEJS 2.0 子组件访问/调用父组件的实例,主要包括VUEJS 2.0 子组件访问/调用父组件的实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:
子组件:
<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 子组件访问/调用父组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- spark2.x依赖包POM
- P03_Hive 安装
- P06_flume-ng-1.5.0-cdh5.3.6安装
- P04_zookeeper-cdh5集群搭建
- P05_kafka_2.9.2-0.8.1集群搭建
- 再探matplotlib
- 分布式系统(Distributed System)资料
- Python性能提升20倍居然不是标题党?
- Spark开发电商日志分析用户行为聚合功能练习下面开始搭建开发环境注意Task表中最后一个列task_param中,Json的StartDate和EndDate需要设置成今天,因为mock数据的时候,
- HDU 3783 ZOJ
- HDU 1412 {A} + {B}
- HDU 2092 整数解
- Hadoop数据分析平台实战——020Hadoop Shell命令(初学跳过)离线数据分析平台实战——020Hadoop Shell命令(可跳过)
- HDU 2080 夹角有多大II
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS7 Docker Nginx部署及运行详解
- linux下安装memcached_动力节点Java学院整理
- OneinStack一键安装PHP/JAVA/HHVM和超详细的VPS手动安装LNMP的方法
- RTSP协议视频平台EasyNVR如何将静态广告位修改为动态广告位?
- keeplive+mysql+drbd高可用架构安装步骤
- IP摄像头RTSP协议视频平台EasyNVR录像列表没有按照开始时间倒序排序的问题修复
- leetcode哈希表之两数之和
- Linux系统下Tomcat8启动速度很慢的解决方法
- Linux下查看binlog文件创建时间的命令
- Linux下修改文件权限(所有权)
- Sticks(UVA - 307)【DFS+剪枝】
- Linux CentOS服务器搭建与初始化配置教程
- Centos6.9安装vsftpd并配置多用户的方法
- linux c下log输出代码模板示例代码
- linux adsl 拨号自动配置脚本的方法