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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
js图片轮播插件的封装
Jul 21 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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生成EAN_13标准条形码实例
2013/11/13 PHP
PHP中session变量的销毁
2014/02/27 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python错误处理操作示例
2018/07/18 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
网络工程师的自我评价
2013/10/02 职场文书
初中科学教学反思
2014/01/21 职场文书
请假条的格式
2014/04/11 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
初中生物教学随笔
2015/08/15 职场文书