vue——组件间的通信

原创 minsong 随笔 Vue 660阅读 2018-05-22 11:27:33 举报

1.父子组件的通信

1.父组件利用props向子组件传输数据

如上所示,父组件在模板中引用子组件,通过v-bind传递参数myMessage,值为parentMsg,其可以为父组件中的动态属性。在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign({},myMessage)(在computed中定义),这样子组件的改动将不会影响到父组件。

2.子组件向父组件传递参数利用事件机制
子组件通过this.$emit()派发事件,父组件利用v-on对事件进行监听,实现参数的传递

同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层,不然直接在顶层监听子组件的子组件的事件是监听不到的,需要先向父组件派发,父组件在向上层触发

3.利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el)
1、当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom对dom进行原生的操作

通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也是)

2、通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性
在父组件中引用子组件并定义ref

调用定义在子组件中的方法show

2.非父子组件的通信

最近在做登录部分时遇到一个场景,当点击 “用户”按钮时,首先渲染login组件,在用户登录后直接跳转到用户信息界面(user组件)。这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧。 简而言之,我要解决的就是兄弟组件之间的信息传递问题。

在异步请求完成后,就跳转到user组件中,但是response的请求返回信息就无法传到非父子组件的user组件中。

1.使用eventBus

最好先新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js

然后在 login.vue 文件中:

在user.vue文件中:

但是在测试时发现在user.vue组件的监听 没有被触发
分析:在我遇到的情境中,login.vue组件和user.vue 组件是互相替代的关系,即需要从login组件通过vue-router跳转到user组件,在login.vue销毁后才开始渲染user.vue组件,所以在user.vue中的监听是在事件以及触发之后才开始,自然不会产生回调函数。
由此可以看出,官方推荐的eventbus 解决方案的缺陷在于,在数据传递过程中,两个组件必须都已经被渲染过。这种情景下,这种方法不适用。

2.使用vuex
vue——vuex的简单理解
最好在src的根目录下新建一个文件,叫 store.js

然后在login.vue组件中,提交收到的用户信息

最后在user.vue组件中接收vuex仓库中存储的信息,即先引入仓库
//位于user.vue 中

然后可以直接将 userMessage.state 赋值给user.vue作用域中的数据字段,同时,vuex 的state有热更新的属性,对于数据的同步很有帮助,优点良多。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复