Vue组件间数据传递

前言

总结vue组件间的数据传递

1. 路由传参
2. 父组件传递数据给子组件---props
3. 子组件传递数据给父组件---$emit
4. 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", this.value);

//父组件---接收请求/数据
this.$on("showPopup", function(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);//修改数据
    console.log(this.getIndex)//获取数据
},
computed: {
    ...mapGetters([ 'getIndex' ]),
    getIndex(val){
return val
}
},
methods: {
    ...mapActions(['setIndex']),
}