Vue 组件间通信并不是每一次操作都会触发新的通信

需求：新增或者修改都需要组件间立马通信。

操作：把B组件(子组件，这里指的是三级联动组件)的数据传输过来，在A(父组件)组件中处理即子传父这里指的是修改页面或者新增页面三级联动下拉选择完之后点击提交会执行A组件的修改操作。

也就是子组件=>父组件传数据

修改回显页码：

或者把下图红框中的数据在点击修改的时候把数据在弹框(dialog)的三级联动中显示即上图红框。也就是父组件=>子组件传数据

结果：但是发现父子组件间互相通信时，刚开始刷新table页面后父子间传信利用props（父=>子）或者在自定义事件实现（子=>父）这个第一次是没问题的。但是之后不刷新在点击修改按钮或者新增按钮时，拿到的数据都不是最新的数据，是上一次操作完的旧数据或者就是没数据。

为了实现每一次操做立马触发通信，拿到最新传递的数据，所以解决办法如下：

父=>子触发立马通信：

父组件Home.vue：

<!--areaselectupdate  是子组件-->
<areaselectupdate :regionfu="xqy.uparea" :key="timer"v-on:domainPro="getDomainPro"v-on:domainCity="getDomainCity"v-on:domainDist="getDomainDist"></areaselectupdate>

利用 :key="timer" 和下面的日期毫秒值来立马触发父=>子通信

 //编辑回显handleUpdateClick(event){this.timer = new Date().getTime();}

点击修改则修改的方法里面加获取当前时间毫秒值的计算，点击新增就在新增的方法里面加。点哪里哪里加。子组件=>父组件也是一样的。

Vue 组件间通信并不是每一次操作都会触发新的通信相关推荐

Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌订阅除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
面试-vue组件间通信
说一说vue组件间的通信? 1.props,$emit,sync props父组件绑定传值,子组件声明props接收 props接收值原则上不允许改变,但对于对象属性改变,可能不会被vue检测到 $e ...
Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
Vue 组件间通信有哪几种方式
Vue 组件间通信主要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信 1.props / $emit 适用父子组件通信 props是父组件将值传给子组件,$emit是子组件通过派发事件 ...
Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】
Vue组件间的通信引出问题 vue一个重要的思想就是组件化开发,说到组件化开发,提高结构样式行为的复用性,组件写好了,但组件间之间数据如何传递,就成了一个问题- vue 组件之间是可以相互嵌套的,就 ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
每日一道面试题：Vue 组件间通信有哪几种方式？
Vue 组件间通信有哪几种方式? 父子组件通信.隔代组件通信.兄弟组件通信 (1)props / $emit适用父子组件通信 - 这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不 ...

Vue 组件间通信并不是每一次操作都会触发新的通信

需求：新增或者修改都需要组件间立马通信。

Vue 组件间通信并不是每一次操作都会触发新的通信相关推荐

最新文章

热门文章