uniapp组件间传参的方法总结~

1、uniapp除了支持vue中的props和$emit方法实现父子，子父参数传递，这里就不做演示了。

2、uniapp还支持路由参数传递，在目标组件中用onload接收。可参考我的上一个博客。

3、uniapp中任意组件传参，包含页面与tabBar组件传递。

//发送方
uni.$emit('update',{msg:'页面更新'})
//接收方
uni.$on('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

4、uniapp还支持vuex状态管理工具、使用方法与vue2一致。

4.1 安装vuex：npm i vuex -s,当版本出现问题时可指定版本号即可，例如：npm i vuex@3.6.2 -s

4.2 在main.js同级目录下新建store文件夹，里面新建index.js文件。

//导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
//将vuex安装为插件
Vue.use(Vuex)
//创建vuex实例并导出
export default new Vuex.store({
    state:{
        num:18
    },
    mutations:{
        add(state,e){
            state.num++
        }
    },
    actions:{
        newadd(context){
            // context 是一个与 store 实例具有相同方法和属性的 context 对象
            setTimeout(()=>{
                context.commit('add',e)
            },2000)
        }
    },
    getter:{
        nums:(state,e)=>{
            return state.num+e
        }
    }
})

4.3在main.js中配置。

import store from './store'

new Vue({
    store,
    render:h=>h(APP)
}).$mount('#app')