vue实现公共组件传值并及时监听到数据更新视图
vue公共组件传值及时监听到数据更新视图
场景
AB两个子组件在 父页面中，（我们险别估损信息为A，立案信息为B）
B组件的某个值是和A组件中一样的且A组件值变化B即使监听并渲染.例如：下图总额A组件要把金额传给 B组件的估损金额框，A金额变B也变
金额已经绑定在A组件中
用兄弟传值 把A组件的金额传到B组件的估损金额
1.兄弟组件的语法是。先建一个bus.js文件
import Vue from 'vue' export default new Vue()
2.在A组件中引入bus.JS
3.把本地的 金额 值传给B组件，我这里是下拉框值变化的时候会触发。
4.为了初始化页面时就及时更新，在created在调用这个方法
5.B组件引入bus.js文件，并在页面初始化时候接受A组件传给的金额值。（我这里用本地的price值去接受传过来的）
6.这时已经接到A组件传过来的值了，在监听这个值如果有变化及时把最新的值赋给本地变量
vue组件传值的几种方式
父传子
当子组件在父组件中当做标签使用的时候，给子组件定义一个自定义属性，值为想要传递的数据。
在子组件中通过props进行接收，props是专门用来接收外边的的数据的，有两种接收方式，数组和对象，对象可以限制数据的类型。
在这里简单介绍一下单项数据流的概念。
单向数据流：父组件向子组件传递数据的时候，子组件不允许更改父组件的数据，因为父组件会向多个子组件传值，如果说某个子组件对父组件的数据进行修改的话，很有可能会导致其他的组件发生错误，很难对数据的错误进行捕捉。
子传父
当子组件在父组件中当做标签使用的时候，如果子组件需要给父组件传递数据的时候，需要在子组件中定义一个自定义的事件，事件名称不需要加()的
在子组件中通过this.$emit触发自定义事件，将需要传递的参数通过emit的第二个参数进行传递
非父子组件传值
1.通过创建一个公共的Vue实例对象，this的指向是不同的，所以不能互相传值，所以创建一个公共的实例，就可以传值了，将实例对象绑定在Vue的原型身上即可。传值的一方调用$emit，接收的一方调用$on，但是这种方法非常耗费性能，我们可以将on,emit等棱出来挂载。
2.用第三方封装好的eventbus
3自己封装的$on,$emit,$off等方法。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码（代码隐藏）,更好地促进视图层开发与模式其余部分的分离,这篇文章主要给大家介绍了关于Vue.js中MVVM的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue-cli3开发Chrome插件实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
雷达图是一种可视化数据的方式,用于比较多个类别中不同指标的相对值,它适用于需要展示多个指标之间的关系和差异的场景,本文给大家介绍了如何用Vue3轻松创建交互式雷达图,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue项目中axios配置方式(代理配置),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue网络请求的三种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
本篇文章主要介绍了vue 文件目录结构详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
ref是Vue3中一个非常重要的功能,它可以用来获取DOM节点,从而实现对DOM节点的操作,下面这篇文章主要给大家介绍了关于vue3中获取dom元素和操作实现的相关资料,需要的朋友可以参考下2023-06-06
vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码
这篇文章主要介绍了vue3 拖拽hooks(可兼容移动端)和自定义指令拖拽的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了从组件封装看Vue的作用域插槽的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论