vue通信及组件之间传值

原文链接：（https://github.com/Xweihaifeng/vue-props）
借鉴链接：（https://blog.csdn.net/lander_xiong/article/details/79018737）
​​​​​​​父子组件方法调用：（https://blog.csdn.net/zgrkaka/article/details/100528714）

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

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

1. 组件间的父子之间的传值

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

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

子组件

 

2.组件间的子父之间的传值

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

子组件

父组件 

---

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

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

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

import Vue from 'vue'
let connect = new Vue()    // 实例
export default connect

组件A

组件B 

效果展示如下：

       

4、sessionStorage缓存

组件A

组件B

5、路由带参数跳转

组件A：有路由默认的页面 

组件B：路由其他页面 children

效果

       

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

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

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

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
   }
   }
})

某文件触发事件

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

展示页面

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