vue通信及组件之间传值

发表于 更新于 分类于 ， ， ， 本文字数： 1.2k 阅读时长 ≈ 1 分钟

常用 vue 通信大概有这几种方式进行：

  • 组件间的父子之间的传值
  • 组件间的子父之间的传值
  • 非组件间的组件间的传值（简称：EventBus）
  • sessionStorage 缓存传值
  • 路由带参数跳转进行传值
  • vuex 进行传值

组件间的父子之间的传值

思路：父组件调用子组件 dom 位置声明一个名称，然后在子组件接收这名称，便可直接调用。

  • 父组件（谁是父组件个人理解：谁引用谁的组件，谁就是父组件）：
p1
  • 子组件：
p2

组件间的子父之间的传值

思路：在子组件通过触发一个事件带值，让父组件接受这个事件，解析这个值

  • 子组件：
p3
  • 父组件：
p4

非组件间的组件间的传值（简称：EventBus）

先用例子来解释下组件间的关联：组件 A 比作一个路由器，通过中继器 (eventBus.js) 让其他房子接收到信号（组件B）

思路：首先在src目录下创建一个eventBus.js文件，复制这行代码进去

1
2
3
import Vue from 'vue'
let connect = new Vue()    // 实例
export default connect
  • 组件A：
p5
  • 组件 B：
p6

效果展示如下:

p7
p8

sessionStorage 缓存

  • 组件 A：
p9
  • 组件 B：
p10

路由带参数跳转

  • 组件 A：有路由默认的页面
11
  • 组件 B：路由其他页面 children
p12

效果如下：

p13
p14

vuex 主要做数据交互，维护公共状态或数据

官方网站：Vuex

多看几遍这图，vuex 基本就会使用，多加运用就会更加熟练。

p15

src下创建一个store的文件夹，里面创建index.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
   state: {
   city: "上海"
   },
 
   actions: {
     handleCity(ctx, city) {
   // console.log(ctx, city)
       ctx.commit("handleCity", city)
    }
  },
mutations: {
     handleCity(state, city) {
      state.city = city
   }
   }
})

某文件触发事件

1
2
3
4
methods: {
    handleCityClick(city) {
      this.$store.dispatch("handleCity", "北京");
    },

展示页面

1
<h1>{{this.$store.state.city}}</h1>

致谢

本文摘抄至：vue通信及组件之间传值