前言
總結vue組件間的數據傳遞
- 路由傳參
- 父組件傳遞數據給子組件---props
- 子組件傳遞數據給父組件---$emit
- vuex數據管理
路由傳參 vue-router官網
params方式
路由文件---router/index.js （此路徑參考 使用Vue-cli創建項目及常用配置）
{
path: '/user/:id',
name: 'user',
component: resolve => require(['@/pages/user.vue'], resolve),
}
//傳參方式
//方法1
this.$router.push({name:'user',params:{'id':this.id}});
//方法2
this.$router.push({path:'/user/1}});
//獲取數據方式
console.log(this.$route.params.id)
query方式
//傳參方式
this.$router.push({name:'user',query:{'id':this.id}});
//獲取數據方式
console.log(this.$route.query.id)
.
.
父組件傳遞數據給子組件---props
//父組件---傳遞數據
<template>
<userTemplate :userData='userData'></userTemplate>
</template>
<script>
import userTemplate from "@/components/userTemplate .vue";
export default {
components:{
userTemplate
},
data(){
return {
userData:{
user:'',
sel:false
},
}
},
};
</script>
//子組件 userTemplate ---獲取數據
export default {
props: ['userData'],
data() {
return {
};
},
mounted(){
console.log(this.userData)
}
};
vue不推薦子組件通過props修改父組件的數據哦
.
.
子組件傳遞數據給父組件---$emit
//子組件---發送請求/數據
this.$emit("showPopup", '1');
//父組件---接收請求/數據
<template>
<tradeOrder @showPopup='showPopupFn'/>
</template>
//js添加方法，監聽
showPopupFn(value){
console.log(value);
}
.
.
vuex數據管理 vuex 官網
- vuex文件---store/index.js （此路徑參考 使用Vue-cli創建項目及常用配置）
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
index: 0,
},
getters: {
getIndex:state => {
return state.index
},
},
mutations: {
setIndex(state, data) {
state.index= data
},
},
actions: {
setIndex(conText, data) {
conText.commit('setIndex', data);
},
}
});
- 修改index的值
import { mapState ,mapGetters,mapActions } from 'vuex'
export default {
data() {
return {
idx:0,
}
},
mounted(){
//設置/修改 index
this.$store.dispatch('setIndex',this.idx);//修改數據
},
methods: {
...mapActions(['setIndex']),
}
- 獲取index的值
import { mapState ,mapGetters,mapActions } from 'vuex'
export default {
data() {
return {
}
},
computed: {
...mapGetters([ 'getIndex' ]),
getIndex(val){
return val
}
},
若數據為對象或者數組，可以使用watch深度監聽數據變化
import { mapState ,mapGetters,mapActions } from 'vuex'
export default {
data() {
return {
}
},
watch:{
getEarlyOver:{
handler(val){
return val
},
deep:true
}
},
computed: {
...mapGetters([ 'getIndex' ]),
},
