详解Vue组件之间的数据通信实例_vue.js_脚本之家

行使prop举办多少传递:

由此营造中间的风浪bus总线。达成非父亲和儿子组件之间的多寡通讯。

貌似父组件向子组件传递数据用prop举行传递,注意,子组件不能够对prop中的数据开展改进,vue中明确是幸免子组件对父组件中的数据进行修正。而子组件向父组件进行多少传递则能够透过事件触发父组件的平地风波来得以完毕数量的传递。

1 bus.js文件

前段时间在用vue做项目,学习了好些个东西,不过一时光顾着做项目却忘记要找个日子来收拾一下以来的局地学习新得,因为是新手,所以大概会有错误的地点,接待提出和交换啊~~~

   添加任务  import Bus from '@/bus' export default { methods: { props: ['index'], data () { return { isAdding: false } }, addtask () { this.isAdding = true Bus.$emit('adding-task', this.isAdding, this.index) // 这里触发的事件是'adding-task', 传递了两个参数,分别是this.isAdding和this.index this.$emit } } }</pre><p><strong>3 另外一个组件on接收事件</strong></p><pre >// 模板中的代码就不展示了。主要展示的是script中的代码export default{data() // 这里的数据也不一一显示啦;created () {// 这里使用on监听了adding-task事件,接收到两个参数。所以一旦上面的组件中的adding-task事件触发,这里就会监听到。 Bus.$on('adding-task',  => { if  { this.isShow = state } }) }}</pre><p><strong>缺点:</strong></p><p>有时候小的子组件在页面中有很多个,需要复用,那么为了防止每一次触发相应的事件的时候,都会影响到监听的对应组件,如下图所示。我的解决方案就是给每一个循环的子组件赋值一个index的值;</p><pre >//这里我会在每一次组件emit的时候传递一个index的值,另外一个组件on之后接受参数,会先判断该index是不是与自己的index相等,如果相等才执行相应的数据改变操作。 Bus.$on('adding-task',  => { if  { this.isShow = state }</pre><p>今天先到这里,困了。还有更复杂的数据通信是用vuex,不过我现在的项目应该是暂时还不会用到,所以以后用到再去深入了解。</p><p>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。</p>
//这是父组件中的部分代码,父组件向子组件传递数据(method,dialogFormvisible) // 父组件的部分代码  新增员工   // 父组件的script代码 export default { data () { return { method:{handle: 'add‘, title: '增加员工'} dialogFormvisible: false } } }// 子组件中则需要加prop属性数据 ,如下所示: export default { props: [ 'method', 'dialogFormVisible'] }//所以只要父组件中的数据变化修改,子组件中的数据也会跟这修改;

在chrome中用vue-devtool其实也能够见到有关的数额属性;

(这里本身就径直选用生机勃勃段项目中的例子代码来证明)

第第一建工公司立事件bus,笔者会新建二个bus.js文件;注册bus。
分别在组件中运用emit和on完结多少里面包车型地铁通讯;

有关老爹和儿子组件以至非父亲和儿子组件之间的数码通讯

自然,子组件做完相关操作之后,须要时日的是将属性值dialogFormVisible重新改革为false。如若直接在子组件实行退换的话,就能报错,因为会影响到父组件的多少,vue中鲜明无法一贯对prop的属性值实行改革。那么就能够用事件触发来得以达成子组件向父组件传递数据了。

///父组件监听子组件的事件,通过@close="closeDialog"和@getEmployee="getEmployee"来实现监听;一旦子组件中的事件close和getEmployee发生之后,就会触发父组件中的事件closeDialog和getEmployee事件。// 父组件的部分代码 新增员工 //子组件中的事件分发 export default {methods: { // 关闭弹出框 closeDialog () { this.$emit //这里就是直接触发子组件的close事件,一旦这个执行,父组件中的对应方法就会执行。 }}}// 当那边触发关闭事件的时候,这边的显示值就要关闭,那边会传过来一个false// 父组件的事件export default {methods: { // 当那边触发关闭事件的时候,这边的显示值就要关闭,那边会传过来一个false closeDialog  { this.dialogFormVisible = val }}}

1 老爹和儿子组件之间数据通讯

这么就兑现了老爹和儿子组件之间的数据传递;

2 达成非老爹和儿子组件之间的数码传递

2 组件emit触发事件

//bus.js,注册Busimport Vue from 'vue'export default new Vue()