ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-08-01 23:58:37  阅读:223  来源: 互联网

标签: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
来源: https://blog.csdn.net/qq_36509946/article/details/119303390

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有