Vue父组件如何获取子组件中的变量


Posted in Javascript onJuly 24, 2019

在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题。

之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看。

案例一:点击父组件的按钮,操作子组件显示

注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用。

介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以改变它的样式等。

<template>
 <div class="DbSource-box">
 <el-button type="primary" icon="" class="addBtn" @click="addDbSource()">新增</el-button>
 <db-source-add ref="addAlert" v-on:init="init"></db-source-add>
 </div>
</template>
 
<script>
 import DbSourceAdd from "../components/DbSourceManager/DbSourceAdd";
 export default {
 name: "DbSourceManager",
 components: {DbSourceAdd},
 methods: {
  // 点击新增按钮,弹出新增数据源的弹框
  addDbSource(){
  this.$refs.addAlert.$el.style.display = "block";
  },
 }
 }
</script>

案列二:获取子组件data中的变量

介绍:

父组件:

这里通过给子组件绑定ref属性,引号中的命名自定义,然后父组件通过 this.$refs.名字.变量名 就可以获得子组件中的值

<template>
 <div class="DbSource-box">
 <el-button type="primary" icon="" class="selectBtn" @click="deleteSelectDbSource()">批量删除</el-button>
 <db-source-table ref="getSelectData" :Data="Data" v-on:init="init"></db-source-table>
 </div>
</template>
 
<script>
 import DbSourceTable from "../components/DbSourceManager/DbSourceTable";
 export default {
 name: "DbSourceManager",
 components: {DbSourceTable},
 methods: {
  // 删除选中的数据源(批量删除)
  deleteSelectDbSource(){
  console.log(this.$refs.getSelectData.multipleSelection)
  },
 }
 }
</script>

子组件:

<template>
 <div class="table-box">
 
 </div>
</template>
 
<script>
 export default {
 name: "DbSourceTable",
 props:["Data"],
 data(){
  return {
  multipleSelection:[],
  pagesize: 3,
  currpage: 1,
  currId:""
  }
 }
</script>

好了,以上就是父组件获取子组件的值并且操作子组件的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
vue子路由跳转实现tab选项卡
Jul 24 #Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 #Javascript
Vue.js路由实现选项卡简单实例
Jul 24 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
2015年领班工作总结
2015/04/29 职场文书
在人间读书笔记
2015/06/30 职场文书
电力培训学习心得体会
2016/01/11 职场文书