vue组件间传参

1. 浏览器传参

设置
sessionStorage.setItem('参数名','参数值');
获取
sessionStorage.getItem('参数名')

2. 父子组件传参

父组件

<h2 title="参数值">父组件传参</h2>

子组件

export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}

3. vuex

export default new Vuex.Store({
  state: {
    transferArgument:'兄弟间传参',
    gettersStr: ''
  },
  getters: {
    // 过滤state中的值
    changeState(state) {
      state.gettersStr = '修改了state中参数';
    },
  },
  mutations: {
    setTransferArgument(state,a) {
      state.transferArgument = '修改state中参数：' + a;
    }
  },
  actions: {
    //触发mutations中的方法，异步操作
    actionsSet(context, a) {
      context.commit('setTransferArgument', a)
    }
  },
  modules: {
  }
})

获取及修改vuex中参数

<div>
	<h2>vuex传参</h2>
	<h3>vuex中state里获取值：{{$store.state.transferArgument}}</h3>
	<h3>调用vuex中getters里的方法修改state中的参数：{{$store.state.gettersStr}}</h3>
	<h3 @click="$store.commit('setTransferArgument','mutations修改的值')">点我通过mutations修改vuex中state中的参数值</h3>
	<h3 @click="$store.dispatch('actionsSet','actions修改的值')">点我通过actions修改vuex中state中的参数值</h3>
</div>

4. 高阶组件传参

上级组件向下级组件传参

export default {
  provide() {
    return {
      proIn: '通过provide和inject传参'
    }
  }
}

下级组件接受参数

inject: ['proIn']

使用

<h2>{{proIn}}</h2>

来源：oschina

链接：https://my.oschina.net/u/4664213/blog/4690416