08.Vue传值方式 (VUE全栈开发学习笔记)

08.Vue传值方式.jpg

1.prototype

使用场景：全局对象，函数
对象挂载 main.js:

import lanzyRequest from ./network/lanzyrequest.js
Vue.prototype.lanzyRequest = lanzyRequest

对象使用 xxx.vue：

this.$lanzyRequest.xxx

2.路由传参

使用场景：路由 使用2.2所示方法

2.1. path传参

配置路由：

{
  path: '/lanzypath/:id',
  name: 'particulars',
  component: particulars
}

传参：

this.$router.push|replace({
  path: `/lanzypath/${id}`,
})

取参：

this.$route.params.id

2.2. params|query

传参：

this.$router.replace({
  name: router/index.js中定义的路由名,
  query|params: {
    key: value
  }
})

取参：

this.$route.query|params.key

query相当于get方式传参，参数会在地址栏中显示
params相当于post方式传参，参数不会在地址栏中显示，刷新页面会丢失参数
注意vue不支持同路由跳转，所以参数变化而路由地址不变的情况只能使用query方式传参

3.父子组件传参

使用场景：父子组件间

3.1. 父传子

子组件定义属性：

props: {
    title：String
}

父组件通过html标签属性传值：

3.2. 子传父

子组件发射事件：

this.$emit('onShow', {e, schedule})

父组件接收事件：

< XXXXQuarterCell @show="onShow">
  show (event) {
  let {e, schedule} = event
},

4.Vuex共享数据

store/mod1.js

export default {
  state:{ 
    curWeek: lanzyUtilsJs.getCurWeek()
  },
  getters:{
    getObjByYmd (state, getters) {
      return ymd => {
        return state.schedules.filter(s => s.ymd === ymd)
      }
  }，
  mutatons:{
    preNextDay (state, curDate) {
      state.curDate = curDate
    }
  },
  actions:{
    aUpdateInfo(context, param){
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('mutationsMethod');
          resolve('返回值');
        }, 1000)
      }
    },
}

views/xxx.vue

this.$store.mod1.state.StateName
this.$store.mod1.getters.GetterName(param)
this.$store.mod1.commit('mutation name', param);
this.$store.mod1.disaptch('action name', param);