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

//父组件---传递数据

//子组件 userTemplate ---获取数据
export default {
    props: ['userData'],
    data() {
        return {
        };
    },
    mounted(){
        console.log(this.userData)
    }
};

vue不推荐子组件通过props修改父组件的数据哦

.
.

---

子组件传递数据给父组件---$emit

//子组件---发送请求/数据
this.$emit("showPopup", '1');

//父组件---接收请求/数据


//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' ]),
},