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

前言

在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获取子组件的值和方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • vue父组件触发事件改变子组件的值的方法实例详解

    父组件向子组件通信 业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作 后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-

  • vue 父组件调用子组件方法及事件

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设想思路:点击父组件中的按钮触发子组件中上传方法: 子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { c

  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

  • Vue父组件调用子组件事件方法

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

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

    在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组价,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的值得问题. 之前有说过通过ref来让父组件操作子组件,并且传值,那么我们今天来详细看看. 案例一:点击父组件的按钮,操作子组件显示 注:可以通过获取id/class来操作,这里我就不介绍这种方法了,至于jquery的话,在vue中还是慎用. 介绍:这里通过给子组件绑定ref属性,引号命名自定义,然后父组件通过 this.$refs.名字 就可以操作子组件的元素,以

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

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • Golang反射获取变量类型和值的方法详解

    目录 1. 什么是反射 2. reflect.Type 2.1 类型Type和种类Kind 2.2 引用指向元素的类型 2.3 结构体成员类型 3. reflect.Value 3.1 结构体的成员的值 3.2 遍历array.slice 3.3 遍历map 4. 反射的三大定律 4.1 从interface到反射对象 4.2 从反射对象到interface 4.3 通过反射修改对象,该对象值必须是可修改的 1. 什么是反射 反射是程序在运行期间获取变量的类型和值.或者执行变量的方法的能力. G

  • JS实现获取GIF总帧数的方法详解

    JS实现获取GIF总帧数的方法详解

    目录 前言 写在前面 思路分析 什么是Gif 组成结构 解析原理 数据块分析 Header Block Logical Screen Descriptor Global Color Table Graphics Control Extension Image Descriptor Image Data 实现代码 测试用例 插件地址 前言 有一个Gif图片,我们想要获取它的总帧数,超过一定帧数的图片告知用户不可上传,在服务端有很多现成的库可以使用,这种做法不是很友好,前端需要先将gif上传至服务端

  • 获取Django项目的全部url方法详解

    在为一个项目添加权限时,遇到一个问题,就是为项目所有的url设置权限,但是一个一个手动输入太麻烦了,所以考虑用代码获取到一个项目所有的url 首先,考虑到项目最外层的urlpartterns,因为所有的url都要通过这里 urlpatterns = [ # url(r'^admin/', admin.site.urls), url(r'^arya/', site.urls), url(r'^index/', index), ] 先循环打印一下这个列表,看一下拿到的结果: <RegexURLRes

  • 改变vue请求过来的数据中的某一项值的方法(详解)

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • Python获取网络时间戳的两种方法详解

    目录 方法一 代码实现 调用方法 返回结果 方法二 代码实现 调用方法 返回结果 在我们进行注册码的有效期验证时,通常使用获取网络时间的方式来进行比对. 以下为获取网络时间的几种方式. 方法一 需要的时间会比较长,个别电脑上可能会出现不兼容现象 代码实现 def get_web_server_time(self, host_URL, year_str='-', time_str=':'): ''' 获取网络时间,需要的时间会比较长,个别电脑上可能会出现不兼容现象 :param host_URL:

  • Android如何获取子View的位置及坐标详解

    Android如何获取子View的位置及坐标详解

    一.View 1.1.View 概述 视图 (View) 是一个容器,专门负责布局.表现为显示在屏幕上的各种视图,如 TextView.LinearLayout 等. 1.2.View 分类 View 主要分为两类,具体如下表格所示: 类别 示例 特点 单一视图 即一个 View,如 TextView.EditText 不包含子View 视图组 即多个 View 组成的 ViewGroup,如 RelativeLayout 包含子View 1.3.View 类简介 View 类是 Android

  • Go获取与设置环境变量的方法详解

    目录 前言 01 从安装 Go 说起 02 Go 如何使用环境变量 03 小结 前言 今天的文章比较基础,但却是必须掌握的,而且本文有些内容,也许你之前没想过.希望这篇文章能够让你理解环境变量并掌握 Go 环境变量相关操作. 01 从安装 Go 说起 其实不止是安装 Go,其他语言一本也会有类似的问题.一般来说,安装完 Go 后,会建议将 go 可执行程序配置到 PATH 环境变量中. 比如我本地的 PATH 环境变量的值: $ echo $PATH /Users/xuxinhua/.go/bi

  • Java Spring Controller 获取请求参数的几种方法详解

    Java Spring Controller 获取请求参数的几种方法  1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交.若"Content-Type"="application/x-www-form-urlencoded",可用post提交 url形式:http://localhost:8080/SSMDemo/demo/addUser1?username=lixiaoxi&password=1

  • iOS 获取设备唯一标示符的方法详解

    在开发中会遇到应用需要记录设备标示,即使应用卸载后再安装也可重新识别的情况,在这写一种实现方式--读取设备的UUID(Universally Unique Identifier)并通过KeyChain记录. 首先iOS中获取设备唯一标示符的方法一直随版本的更新而变化.iOS 2.0版本以后UIDevice提供一个获取设备唯一标识符的方法uniqueIdentifier,通过该方法我们可以获取设备的序列号,这个也是目前为止唯一可以确认唯一的标示符.好景不长,因为该唯一标识符与手机一一对应,苹果觉得

随机推荐