vue 子组件的数据如何根据ref传给父组件

最新推荐文章于 2024-08-29 14:26:44 发布
最新推荐文章于 2024-08-29 14:26:44 发布
阅读量592 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49732089/article/details/120809347
版权

在这里插入图片描述

父级里写个ref:<moban ref="mobanList"></moban>
当父级的确定按钮点击后：
var list = this.$refs['mobanList'].model.drugTable;
这个list就是你的drugTable了。

或者在子件的method里写个 
getDrugTable(){
  return this.model.drugTable;
}
然后父组件点确定时：
var list = this.$refs['mobanList'].getDrugTable()
牵手北京99
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
propsData,ref的使用,$emit子级向父级传值
qq_55574785的博客
03-09 461
propsData的使用 <div id="box"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script type="text/JavaScript"> let myExtend = Vue.extend({ template:`<div&g
子组件的refs传给父组件
小耳朵晨晨
10-22 263
我想写一个子页面elementUI 表格多选清除的功能 在父组件页面上定义ref 然后一层一层就直接找到了。 this.$refs.query.$refs.table.clearSelection()
vue中利用ref实现更灵活的子向父传值
zxdznyy的博客
01-20 5677
目前我们熟知的子向父传值有两种方式： 一种是在父组件中定义函数，然后将函数利用props传给子组件，子组件调用时父组件可以收到子组件的参数；另一种利用自定义事件，给子组件在父组件中绑定一个自定义事件，子组件利用$emit方式触发该自定义事件时可以将数据传给父亲。今天介绍的是通过ref的方法实现子组件传值给父组件。这种方式比前两种方式用起来更加灵活。Vue组件之间的数据共享讲解Vue中ref引用操作DOM元素其中，第一篇文章中有涉及到子向父传值的传统方式。我们在学传统的子向父传值时，涉及到了自定义事件。
vue组件之间互相传值：父传子，子传父
Amanda_wmy的博客
04-27 4284
vue组件之间互相传值：父传子，子传父 为什么要用到组件间传值？ 答：组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据，也不能直接将子组件的数据传到父组件里面，所有我们要用到组件间传值。 父组件向子组件传值步骤：（可传数据，方法） 首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值 其次，父组件要和子组件有契合点：就...
vue的ref父子传参
m0_59638694的博客
10-26 351
vue的ref父子传参以及遇到的错误
vue父组件向子组件传递数据
Mrzhouzh的博客
03-28 233
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 如果不用:就会当成字符串传过来 用:就会当为变量 --> <!-- <cpn :cmovies='movies'></cpn> -->
【vue】子组件向父组件传递数据
doctors-w的博客
03-18 206
vue中子组件向父组件中传递数据方法 this.$emit.(“方法名”，“第一个参数”，“第二个参数”) 废话少说，上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width...
vue 父组件中调用子组件函数的方法
10-16
在Vue中，子组件可以通过`this.$emit`触发一个事件，并将一些数据作为参数传递给父组件，而父组件则通过监听这个事件来响应子组件的行为。这种方式更符合Vue的单向数据流原则，有助于保持组件间独立和松耦合的关系。...
vue父组件中获取子组件中的数据(实例讲解)
08-29
vue父组件中获取子组件中的数据实例讲解 ...本文通过实例讲解，带领大家了解了如何在Vue父组件中获取子组件中的数据，包括使用`ref`和`$emit`方法获取子组件中的数据，以及Vue组件之间的通信和生命周期等知识点。
vue 使用ref 让父组件调用子组件的方法
08-28
Vue 使用 Ref 让父组件调用子组件的方法 Vue.js 是一个流行的前端框架，提供了许多强大的特性来帮助开发者快速构建应用程序。其中，使用 Ref 让父组件调用子组件的方法是 Vue.js 中一个非常有用的特性。本文将详细...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
Vue父组件如何获取子组件中的变量
10-16
父子组件的数据通信可以通过多种方式实现，其中一种方式就是通过在父组件中使用ref属性来直接获取子组件的实例，并访问子组件的数据或方法。 在Vue.js中，ref属性用于给元素或子组件注册引用信息，它相当于给该元素...
VUE（子传父）$refs的方式
Congnandaobei的博客
06-20 1116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件通信-父子通信-$refs</title> <style> .com-a { padding: 5px; ...
vue父子组件之间传值（ref）
小白的博客
02-09 2451
父组件： <Student ref="student" /> methods:{ getName(){ console.log("学生名：",name) } } mounted(){ //当自定义事件sName被触发时 this.$refs.student.$on('sName',this.getName) } 子组件： <button @click="sen...
06实战：如何通过 ref 实现组件的子传父、父传子的交互(实例演示)？
狮子座的男孩
09-12 657
1、文件结构：其一、用vue-cli创建一个项目；其二、布置好路由和引入Element-ui 的组件；
React将子组件的ref传给父组件的俩种方法
热门推荐
吴小迪的博客
03-24 2万+
文章目录父组件如何获得子组件的Ref笔者给大家提供俩种方法：一：使用React.forwardRef二：在子组件初始化的时候将ref通过事件传递给父组件 父组件如何获得子组件的Ref 在我们实际开发的过程当中难免会遇到父组件想要获得子组件的ref进行一些操作的时候，那么我们怎么做呢？ 笔者给大家提供俩种方法： 一：使用React.forwardRef 这是react官方文档中给我们说明的，我们照着...
Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，vue3中ref的妙用，vue中获取调用子组件方法，vue中使用子组件数据
imkaifan的博客
02-08 1万+
Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)，vue3中ref的妙用，vue中获取调用子组件方法，vue中使用子组件数据
vue组件通信---子传父(ref方式)
zyy_wx的博客
09-24 1550
vue组件通信---子传父(ref方式)
vue 通过事件的形式调用全局组件
最新发布
liux6687的博客
08-29 78
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue 子组件ref怎么传到父组件
10-25
在Vue中，可以通过`$refs`来访问子组件的实例。如果想要在父组件中访问子组件的实例，可以使用`ref`属性来给子组件命名，然后通过`this.$refs`来访问子组件的实例。 例如，在父组件中给子组件命名为`childComponent`： ``` <template> <div> <child-component ref="childComponent"></child-component> </div> </template> ``` 然后在父组件中就可以通过`this.$refs.childComponent`来访问子组件的实例了。 如果想要在父组件中调用子组件的方法或访问子组件的属性，可以通过访问子组件实例来实现。例如： ``` <template> <div> <child-component ref="childComponent"></child-component> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script> export default { methods: { callChildMethod() { this.$refs.childComponent.childMethod(); } } } </script> ``` 这样就可以在父组件中调用子组件的`childMethod`方法了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值