若依框架不分离版本 传值

在若依框架的不分离版本中，可以使用props或vuex来进行组件之间的传值。

1. 使用props传值：

在父组件中使用props向子组件传递数据，子组件通过props接收数据。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default{
  components:{
    ChildComponent
  },
  data(){
    return{
      msg: 'Hello World!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default{
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

2. 使用vuex传值：

在vuex中定义一个全局状态，不同组件可以通过mutations和actions来修改和获取该状态的值。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    msg: 'Hello World!'
  },
  mutations: {
    updateMsg(state, payload){
      state.msg = payload;
    }
  },
  actions: {
    updateMsg({ commit }, payload){
      commit('updateMsg', payload);
    }
  },
  getters: {
    getMsg: state => state.msg
  }
});

export default store;

在组件中可以通过`this.$store.state`来获取状态值，通过`this.$store.commit()`来调用mutations修改状态值，通过`this.$store.dispatch()`来调用actions修改状态值。

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default{
  components:{
    ChildComponent
  },
  methods:{
    updateMsg(){
      this.$store.commit('updateMsg', 'Hello Vuex!');
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default{
  name: 'ChildComponent',
  computed: {
    message(){
      return this.$store.getters.getMsg;
    }
  }
}
</script>