vue中利用ref实现更灵活的子向父传值

时间:2023-01-23 08:52:47

前言

目前我们熟知的子向父传值有两种方式: 一种是在父组件中定义函数,然后将函数利用props传给子组件,子组件调用时父组件可以收到子组件的参数;另一种利用自定义事件,给子组件在父组件中绑定一个自定义事件,子组件利用$emit方式触发该自定义事件时可以将数据传给父亲。

今天介绍的是通过ref的方法实现子组件传值给父组件。这种方式比前两种方式用起来更加灵活。

这里附上涉及到的知识点链接,如有需要可以复习:
Vue组件之间的数据共享讲解
Vue中ref引用操作DOM元素
其中,第一篇文章中有涉及到子向父传值的传统方式。

一,基础代码

这里放上我的App(父组件)和Son(子组件)的代码,后续所有的改动在此基础之上:
(APP)

<template>
  <div>
    <h2>子组件的msg:</h2>
    <Son></Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
    name: 'App',
    components: {
        Son
    }
}
</script>

<style>

</style>

(Son)

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            msg: '巧克力小猫猿'
        }
    }
}
</script>

<style>

</style>

二,层次递进的讲解用法

2.1 给子组件设置ref

这里我们给子组件设置一个ref,并查看父组件中的this.$refs中有什么(在mounted钩子函数中打印):
vue中利用ref实现更灵活的子向父传值
打印出来的结果是:
vue中利用ref实现更灵活的子向父传值
可以看到,此时ref对象中已经有了Son,并且类型是vc(组件)。既然在ref对象中那我们可以通过ref去操作它。

2.2 自定义事件

我们在学传统的子向父传值时,涉及到了自定义事件。本节的方法依旧余自定义事件有联系,所以在正式了解如何用ref实现子向父传值时我们先来复习下自定义事件。

自定义事件的定义:使用vm.$on这个api:

vm.$on('自定义事件名',自定义事件被触发后调用的回调函数)

如:

 vm.$on( 'aa', function () {
    console.log( 'aa' )
  })

自定义事件的触发:使用vm.$emit这个api:

vm.$emit('自定义事件名',自定义事件需要用到的参数1,参数2,参数n)

一个是定义,一个是触发。我在学习vue视频的时候看到很多人不理解用ref写的这种作法,本质上是对自定义事件的不了解。

2.3 给子组件设置一个自定义事件

在App中为子组件设置一个自定义事件:这里要说的是,==给谁绑定的自定义事件,就去找谁调用。==现在给子组件son绑定了一个自定义事件,那么就要在子组件中去调用它。并且如下图可知,给子组件设置的自定义事件名为qklxmy,一旦触发,则调用回调函数getmsg。
vue中利用ref实现更灵活的子向父传值
在子组件中触发自定义事件:并且把son中的msg传给了该自定义事件qklxmy。(传的msg用于执行自定义事件的回调函数)
vue中利用ref实现更灵活的子向父传值
上述过程,给子组件定义了自定义事件,又在子组件中调用。由于子组件中自定义事件的回调写在父组件中,所以父组件可以收到子组件的传值。

三,灵活性

在前面有说,这么写会更加灵活。之所以灵活,是因为我们可以在钩子函数中使用这种方式传值,如:
vue中利用ref实现更灵活的子向父传值
我们还可以写定时器来设置什么时候接到传值。

四,注意

通过此方式绑定自定义事件,回调要么配置在methos中,就是如上方法,要么就用箭头函数。vue中利用ref实现更灵活的子向父传值
vue中利用ref实现更灵活的子向父传值
如果不用箭头函数,this的指向会出现问题。

后记

以上就是vue中用ref实现灵活的子向父传值的方式,希望能帮助读者朋友更好的理解组件之间的传值以及对ref的理解。欢迎关注。