vue 父组件通过$refs获取子组件的值和方法详解


Posted in Javascript onNovember 07, 2019

前言

在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况:

父传子:在父组件中绑定值,在子组件中用props接收

子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了,

兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式

今天我们要看的是父组件如何直接调取子组件的数据和方法,而不是通过子组件传上来的

在这里我们要理解父组件直接拿事件是在父组件上,子组件传上来数据,事件是在子组件上,是完全不同的两种情况

代码展示

子组件 children.vue,我们在子组件中定义了数据sonData和方法sonMethod

// children.vue

<template>
 <div>我是 children</div>
</template>

<script>
export default {
 data: () => ({
  sonData: '我是子组件的数据!'
 }),
 methods: {
  sonMethod() {
   console.log('我是子组件的方法!')
  }
 },
 computed: {
  
 },
 created() {

 }
}
</script>

父组件 文件

// 父组件

<template>
 <div>
  <children ref='ch'>
  </children>
  <h1 @click="onclick">父组件</h1>
 </div>
</template>

<script>
import children from './coms/children'
export default {
 data() {
  return {}
 },
 components: {
  children
 },
 methods: {
  onclick() {
  // 或者 let chil = this.$refs['ch']
   let chil = this.$refs.ch

  // 父组件可以通过$refs拿到子组件的对象
  // 然后直接调用子组件的 methods里的方法和data里的数据
   console.log(chil) //子组件对象
   console.log(chil.sonData) // 我是子组件的数据
   console.log(chil.sonMethod()) // 我是子组件的方法
  }
 }
}
</script>

注意事项

因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!,所以它不是响应式的,不能用在模板或者计算属性中。

以上这篇vue 父组件通过$refs获取子组件的值和方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
js遍历td tr等html元素
Dec 13 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
js实现电灯开关效果
Jan 19 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 #Javascript
浅谈Vue中render中的h箭头函数
Nov 07 #Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 #Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 #Javascript
vue之a-table中实现清空选中的数据
Nov 07 #Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 #Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 #jQuery
You might like
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
浅析node.js中close事件
2014/11/26 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
如何用Python徒手写线性回归
2021/01/25 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
交通处罚决定书
2015/06/24 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA