前言
众所周知 vue 是一种 mvvm 框架, 它相对于 jquery 可能比较大的差异点之一就在于组件之间的通信了本文重点是梳理了前两个, 父子组件通信和 eventBus 通信, 我觉得 Vue 文档里的说明还是有一些简易, 我自己第一遍是没看明白
父子组件的通信
非父子组件的 eventBus 通信
利用本地缓存实现组件通信
Vuex 通信
第一种通信方式: 父子组件通信
父组件向子组件传递数据
父组件一共需要做 4 件事
- 1.
- import son from './son.js'
引入子组件 son
2. 在
components : {"son"}
里注册所有子组件名称
3. 在父组件的 template 应用子组件, <son></son>
4. 如果需要传递数据给子组件, 就在 template 模板里写
- <son :num="number"></son>
- // 1. 引入子组件
- import counter from './counter'
- import son from './son'
- // 2. 在 ccmponents 里注册子组件
- components : {
- counter,
- son
- },
- // 3. 在 template 里使用子组件
- <son></son>
- // 4. 如果需要传递数据, 也是在 templete 里写
- <counter :num="number"></counter>
子组件只需要做 1 件事
1. 用 props 接受数据, 就可以直接使用数据
2. 子组件接受到的数据, 不能去修改如果你的确需要修改, 可以用计算属性, 或者把数据赋值给子组件 data 里的一个变量
- // 1. 用 Props 接受数据
- props: [
- 'num'
- ],
- // 2. 如果需要修改得到的数据, 可以这样写
- props: [
- 'num'
- ],
- data () {
- return {
- number : this.num
- }
- },
子组件向父组件传递数据
父组件一共需要做 2 件事情
在 template 里定义事件
在 methods 里写函数, 监听子组件的事件触发
- // 1. 在 templete 里应用子组件时, 定义事件 changeNumber
- <counter :num="number"
- @changeNumber="changeNumber">
- </counter>
- // 2. 用 changeNumber 监听事件是否触发
- methods: {
- changeNumber(e){
- console.log('子组件 emit 了',e);
- this.number = e
- },
- }
子组件一共需要 1 件事情
在数据变化后, 用 $emit 触发即可
- // 1. 子组件在数据变化后, 用 $emit 触发即可, 第二个参数可以传递参数
- methods: {
- increment(){
- this.number++
- this.$emit('changeNumber', this.number)
- },
- }
第二种通信方式: eventBus
eventBus 这种通信方式, 针对的是非父子组件之间的通信, 它的原理还是通过事件的触发和监听
但是因为是非父子组件的关系, 他们需要有一个中间组件来连接
我是使用的通过在根组件, 也就是 #app 组件上定义了一个所有组件都可以访问到的组件, 具体使用方式如下
使用 eventBus 传递数据, 我们一共需要做 3 件事情
1. 给 app 组件添加 Bus 属性 (这样所有组件都可以通过 this.$root.Bus 访问到它, 而且不需要引入任何文件)
2. 在组件 1 里,
this.$root.Bus.$emit
触发事件
3. 在组件 2 里, this.$root.Bus.$on 监听事件
- // 1. 在 main.js 里给 app 组件, 添加 bus 属性
- import Vue from 'vue'new Vue({
- el: '#app',
- components: {
- App
- },
- template: '<App/>',
- data() {
- return {
- Bus: new Vue()
- }
- }
- })
- // 2. 在组件 1 里, 触发 emit
- increment(){
- this.number++
- this.$root.Bus.$emit('eventName', this.number)
- },
- // 3. 在组件 2 里, 监听事件, 接受数据
- mounted(){
- this.$root.Bus.$on('eventName', value => {
- this.number = value
- console.log('busEvent');
- })
- },
第三种通信方式: 利用 localStorage 或者 sessionStorage
这种通信比较简单, 缺点是数据和状态比较混乱, 不太容易维护
通过
window.localStorage.getItem(key)
获取数据
通过
window.localStorage.setItem(key,value)
存储数据
注意: 用
JSON.parse() / JSON.stringify()
做数据格式转换
第四种通信方式: 利用 Vuex
Vuex 比较复杂, 可以单独写一篇
总结
以上就是这篇文章的全部内容了, 希望本文的内容对大家的学习或者工作具有一定的参考学习价值, 如果有疑问大家可以留言交流, 谢谢大家对脚本之家的支持
来源: https://m.jb51.net/show/134654