Vue中$ref、$emit、props三中传参方式区别和使用

您所在的位置：网站首页 › vue的传参方法有哪些 › Vue中$ref、$emit、props三中传参方式区别和使用

Vue中$ref、$emit、props三中传参方式区别和使用

2023-06-12 19:10| 来源: 网络整理| 查看: 265

一、概述

$ref、$emit、props是Vue中常见的传参方式，可以实现组件与组件之间的数据传递和交互

二、$ref的使用方式父组件：我是父组件！ import Child from '../components/child.vue' export default { components: {Child}, mounted: function () { console.log( this.$refs.msg); this.$refs.msg.getMessage('我是子组件一！') } } 子组件： {{message}} export default { data(){ return{ message:'' } }, methods:{ getMessage(m){ this.message=m; } } }

通过ref=‘msg'可以将子组件child的实例指给$ref，并且通过.msg.getMessage（）调用到子组件的getMessage方法，将参数传递给子组件。

三、$emit的使用方式

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

父组件：我是父组件！ {{content}} import Child from '../components/child.vue' import OtherChild from '../components/otherChild.vue' export default { components: { Child, OtherChild }, data () { return { a: '我是子组件二！', b: 112233, msg: '我是子组件三！' + Math.random(), content: '' } }, methods: { showMsg (title) { this.content = title } } } 子组件：我是子组件！ export default { mounted: function () { this.$emit('getMessage', '我是子组件传给父组件的参数！') } } 四、props的使用方式

子组件的props选项能够接收来自父组件数据

父组件：（这里采用的是动态传递）我是父组件！ import Child from '../components/child.vue' export default { components: {Child}, data() { return { a:'我是子组件二！', b:112233, msg: '我是子组件三！'+ Math.random() } } }

子组件： {{message}} export default { props: ['message'] } 五、三者的使用场景和区别 1.$ref

$ref用于数据之间的传递，如果ref用在子组件上能通过$ref获取到子组件节点、事件、数据、属性，主要还是父组件向子组件通信

$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

2.$emit

$emit用于事件之间的传递，可以实现子组件传参给父组件

$emit主要是可以在子组件中触发父组件里面的方法

3.props

props用于父组件向子组件传递数据信息，传参方式是单向传输，只能父组件传给子组件，不能实现子组件传参给父组件.

props 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。

参考

参考作者：https://blog.csdn.net/u011441473/article/details/103939511?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

【本文地址】

Vue中$ref、$emit、props三中传参方式区别和使用

Vue中$ref、$emit、props三中传参方式区别和使用

今日新闻

推荐新闻