vue 组件之间传值几种方式,vue组件之间如何传值

一、父子组件、非父组件传值

1、父组件向子组件传值

父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值即可
父组件

子组件

2、子组件向父组件传值

子传父的实现方式就是用了 this. e m i t 来 遍 历 g e t D a t a 事 件 ， 首 先 用 按 钮 来 触 发 s e t D a t a 事 件 ， 在 s e t D a t a 中 用 t h i s . emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this. emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg
子组件

父组件

3、非父组件相互传值 1）第一种方式

非父组件的传值可以借助父组件进行传值，这种方式比较麻烦

2）第二种方式

通过中间文件传值
先建立个中间的js文件
然后再此文件中new一个Vue的实例，然后通过export导出

在每个非父组件中导入DateModule
在Child1中通过DateModule. e m i t 广 播 数 据 , 在 C h i l d 2 中 通 过 D a t e M o d u l e . emit广播数据, 在Child2中通过DateModule. emit广播数据,在Child2中通过DateModule.on监听此广播
在Child1组件中

在Child2组件中

3）第三种方式

通过vuex实现页面传值
vuex是一个专门为vue.js设计的集中式状态管理架构，简单的说就是vuex可以实现不同页面或者组件之间的传值，同时vuex也能够实现数据的持久化。

(1) 先安装vuex

进入项目根目录
npm install vuex --save

(2) 新建store.js文件

新建store.js文件
在此文件中写入

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//增加一个常量const state = {count: 1}//定义 mutations ，处理状态的改变const mutations = {add (state) { ++state.count},reduce (state) { --state.count}}//向外暴露storeexport default new Vuex.Store({state,mutations})

(3) 在main.js 中导入store.js文件

import store from './module/store'
在main.js的new Vue中加入store

new Vue({ el: '#app', router, store, components: {App}, template: '<App/>'}) (4) 在组件中引入store

import store from '../module/store'
并且在export default写入store
子组件二

子组件一

(5) 演示效果