vue组件通信。prop,ref,emit的用法与区别

2021/8/2 6:09:05

本文主要是介绍vue组件通信。prop,ref,emit的用法与区别,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!


前言

        相信对于很多vue初学者来说,看到组件通信这块的时候,跟我一样懵逼,完全摸不清啥是啥,搞到最后,连父子组件都区分不清了。

        下面这篇文章就是我对vue父子组件通信的研究,写的比较啰嗦,但是,对于一个初学者来说,不啰嗦一点,下次忘记了在看,可能又看不懂了。        

一、prop、ref、emit的区别

        我这边对以上三点的区别做一些我自己理解上的区别,用到的语言可能不专业,但是比较通俗易懂。

        prop:父组件向子组件传值,着重于传递数据,不能调用子组件的方法

        ref:父组件向子组件传值,主要调用子组件的属性方法,不擅长数据传递

        emit:子组件向父组件传值

二、具体使用方法

1.prop

        官方文档

        所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

        额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

        注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

参考地址

 参考地址

2.ref

官方地址

官方地址

官方地址

3.emit

官方地址

$emit来触发一个事件,第一个参数:事件名称;第二个参数:可携带的一些参数。

在组件的父级可以通过事件绑定的方式,来接收触发事件

vm.$emit( event, arg )---event:事件名,arg:参数


总结

      总的来说,组件的通信方法就以上几点,看懂的话,写项目应该就没什么大问题了



这篇关于vue组件通信。prop,ref,emit的用法与区别的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程