1. 程式人生 > >vue引用其他元件的method

vue引用其他元件的method

今天寫頁面時遇到時間格式處理問題,想起前幾天在messageHistory.vue的methods裡寫過,就想引入messageHistory.vue的crtTimeFtt方法,
開始用import crtTimeFtt from '../notifyCenter/messageHistory',然後在下面直接呼叫,報錯,說crtTimeFtt沒有export,這裡真是迷了,在messageHistory.vue根本沒有匯出crtTimeFtt,後來匯入import messageHistory from '../notifyCenter/messageHistory,再使用crtTimeFtt,報錯,crtTimeFtt沒有定義,
嘗試使用messageHistory.methods.crtTimeFtt,

發現可以使用,這是一種方法。

如果在本頁面中使用到了某個元件,給元件加ref屬性,也可以通過下面的方法呼叫。
this.$refs['basetable'].query(this.query);(這裡query是子元件的方法)

也可以把crtTimeFtt寫在js檔案裡,export匯出,在需要使用的元件裡,直接匯入就好了,覺得這種還是比較好的。具體如下

common.js

//格式化時間
export default function crtTimeFtt(value) {
  var crtTime = new Date(value);
  return dateFtt("yyyy-MM-dd hh:mm:ss", crtTime);//直接呼叫公共JS裡面的時間類處理的辦法
}

function dateFtt(fmt, date) {
  var o = {
    "M+": date.getMonth() + 1,                 //月份
    "d+": date.getDate(),                    //日
    "h+": date.getHours(),                   //小時
    "m+": date.getMinutes(),                 //分
    "s+": date.getSeconds(),                 //秒
    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
    "S": date.getMilliseconds()             //毫秒
  };
  if (/(y+)/.test(fmt))//這裡就是找到第一個y集合,代替
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

在元件裡

import crtTimeFtt from '../../assets/js/common';

然後直接使用就好了