前言
总结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' ]),
},
