08.Vue傳值方式.jpg

1.prototype

使用場景：全局對象，函數(shù)
對象掛載 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方式傳參，參數(shù)會在地址欄中顯示
params相當于post方式傳參，參數(shù)不會在地址欄中顯示，刷新頁面會丟失參數(shù)
注意vue不支持同路由跳轉(zhuǎn)，所以參數(shù)變化而路由地址不變的情況只能使用query方式傳參

3.父子組件傳參

使用場景：父子組件間

3.1. 父傳子

子組件定義屬性：

props: {
    title：String
}

父組件通過html標簽屬性傳值：

<tab-bar-left :title="title"></tab-bar-left>

3.2. 子傳父

子組件發(fā)射事件：

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

父組件接收事件：

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

4.Vuex共享數(shù)據(jù)

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);