.vue 如何將時間獨立成一個組件提供給其他頁面共同使用

vue vue.js vue component

歪歪 2018-05-28 10:58:18 ‧ 2630 瀏覽

分享至

如標題
因為我後續還有很多頁面會需要讀取當下時間
請問我要怎麼將現有的[收料時間]獨立成一個.vue頁面
提供給接下來其他頁面使用?

以下是目前的程式碼

<template>
    <div class="row" style="margin-bottom: 8px; margin-left:10px;">
      <div class="row">
        收料時間<span class="space"/><input type="text" size="5" v-model="datetime">
        收料員<span class="space"/><input type="text" size="10" v-model="fullName">
      </div>
    </div>

</template>

<script>

export default {
  name: 'IMPS03002',
  components: {
    Header,
  },
  data () {
    return {
     
      datetime: this.getDatetime(),
     
      header: {
     
      },
      lines: []
    }
  },
  computed: {

  },
  methods: {

    
    getDatetime: function(){
      return new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric",minute: "numeric",second: "numeric"})
    },
    intervalUpdate_datetime: function(){
        this.datetime = this.getDatetime()
    },
	toggle: function(){
		if(this.bars===false) this.bars=true
        else this.bars=false
	}
  },


  /*setInterval()按照指定的周期來調用函數*/
  /*setTimeout() 只執行一次*/
  /*created 實體建立完成。資料 $data 已可取得，但 $el 屬性還未被建立。*/

  created: function () {
    setInterval(() => {
      this.intervalUpdate_datetime()
    }, 1000)
  }
}
</script>
<style scoped>
.row-td {
  word-break: break-all
}

</style>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Homura

iT邦高手 1 級 ‧ 2018-05-28 11:57:09

最佳解答

你把那部分獨立做程一個Component(組件)就行了!
首先先把你要的部分獨立出來成timeComponents.vue

<template>
  <div>
    <span class="space"/><input type="text" size="5" v-model="datetime">
  </div>
</template>

<script>

export default {
  name: 'timeComponents',
  data () {
    return {     
      datetime: this.getDatetime(), 
      header: {},
      lines: []
    }
  },
  methods: {
    getDatetime: function(){
      return new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric",minute: "numeric",second: "numeric"})
    },
    intervalUpdate_datetime: function(){
        this.datetime = this.getDatetime()
    },
	toggle: function(){
		if(this.bars===false) this.bars=true
        else this.bars=false
    }
  },
   created: function () {
    setInterval(() => {
      this.intervalUpdate_datetime()
    }, 1000)
  }
}
</script>

<style scoped>
</style>

然後你原本的頁面要import並註冊剛剛那個組件
在你要的位置擺上你的組件

<template>
    <div class="row" style="margin-bottom: 8px; margin-left:10px;">
      <div class="row">
          <!--引用的組件-->
        收料時間<TimeCom/>
        收料員<span class="space"/><input type="text" size="10" >
      </div>
    </div>
</template>

<script>
import TimeCom from '@/components/timeComponents' // 引用

export default {
    name: 'timComponent',
    components: { TimeCom },
    template: '<TimeCom/>'
}
</script>
<style scoped>
.row-td {
  word-break: break-all
}

</style>

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

歪歪 iT邦新手 3 級 ‧ 2018-05-28 12:40:34 檢舉

謝謝你
我照你的方法目前成功顯現出時間

但我還有遇到一個問題timeComponents.vue底下的這段程式碼，會讓現在的時間每分每秒都在更新，但是目前我原本頁面import後時間沒有及時在更新，請問我還遺漏什麼部分嗎?

created: function () {
    setInterval(() => {
      this.intervalUpdate_datetime()
    }, 1000)
  }

歪歪 iT邦新手 3 級 ‧ 2018-05-28 13:00:35 檢舉

@RE:homura
我已找到問題點，是括號的問題，改正後就能及時更新囉～
`export default {
name: 'timeComponents',
data () {
return {
datetime: this.getDatetime(),
header: {},
lines: []
}
},
methods: {
getDatetime: function(){
return new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric",minute: "numeric",second: "numeric"})
},
intervalUpdate_datetime: function(){
this.datetime = this.getDatetime()
}
},