vue组件通信。prop,ref,emit的用法与区别 |
您所在的位置:网站首页 › EMIT是什么检测方法 › 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:参数 总结总的来说,组件的通信方法就以上几点,看懂的话,写项目应该就没什么大问题了 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |