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

 更新时间:2019年07月24日 12:04:19   作者:坏丶毛病  
这篇文章主要为大家详细介绍了Vue父组件如何获取子组件中的变量,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在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>

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

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

相关文章

  • Vue数据代理的原理和实现

    Vue数据代理的原理和实现

    数据代理是什么?通过一个对象代理,对另一个对象中属性的操作,简单就是说:可以通过 对象b 对 对象a 中的属性进行操作,这里我学到的数据代理是用Object.defineProperty这个方法进行操作
    2022-11-11
  • 详解vue2与vue3获取模版引用ref的区别

    详解vue2与vue3获取模版引用ref的区别

    这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • vue v-model的详细讲解(推荐!)

    vue v-model的详细讲解(推荐!)

    vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue无限滑动周选择日期的组件的示例代码

    Vue无限滑动周选择日期的组件的示例代码

    这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue使用docx-preview实现docx文件在线预览功能全过程

    vue使用docx-preview实现docx文件在线预览功能全过程

    文件在线预览是目前移动化办公的一种新趋势,下面这篇文章主要给大家介绍了关于vue docx-preview实现docx文件在线预览功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue 遮罩和ref的使用setup版和非setup版

    vue 遮罩和ref的使用setup版和非setup版

    这篇文章主要介绍了vue 遮罩和ref的使用,setup版和非setup版,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • vuex actions传递多参数的处理方法

    vuex actions传递多参数的处理方法

    今天小编就为大家分享一篇vuex actions传递多参数的处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vuex 项目结构目录及一些简单配置介绍

    vuex 项目结构目录及一些简单配置介绍

    这篇文章主要介绍了vuex 项目结构目录及一些简单配置,需要的朋友可以参考下
    2018-04-04
  • vue 路由判断方式

    vue 路由判断方式

    这篇文章主要介绍了vue 路由判断方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 微信小程序用户盒子、宫格列表的实现

    微信小程序用户盒子、宫格列表的实现

    这篇文章主要介绍了微信小程序用户盒子、宫格列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论