位置: IT常识 - 正文
vue中利用ref实现更灵活的子向父传值
发布时间：2024-01-17推荐整理分享vue中利用ref实现更灵活的子向父传值，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
目前我们熟知的子向父传值有两种方式： 一种是在父组件中定义函数，然后将函数利用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钩子函数中打印)： 打印出来的结果是： 可以看到，此时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。 在子组件中触发自定义事件：并且把son中的msg传给了该自定义事件qklxmy。（传的msg用于执行自定义事件的回调函数） 上述过程，给子组件定义了自定义事件，又在子组件中调用。由于子组件中自定义事件的回调写在父组件中，所以父组件可以收到子组件的传值。
三，灵活性在前面有说，这么写会更加灵活。之所以灵活，是因为我们可以在钩子函数中使用这种方式传值，如：
我们还可以写定时器来设置什么时候接到传值。
四，注意通过此方式绑定自定义事件，回调要么配置在methos中，就是如上方法，要么就用箭头函数。 如果不用箭头函数，this的指向会出现问题。
后记以上就是vue中用ref实现灵活的子向父传值的方式，希望能帮助读者朋友更好的理解组件之间的传值以及对ref的理解。欢迎关注。
上一篇：chatGPT身份指令
