Vue單文件組件基礎模板

背景

相信大家在使用Vue開發項目時，基本都是以單文件組件的形式開發組件的，這種方式好處多多：

1.代碼集中，便於開發、管理和維護

2.可復用性高，直接將vue文件拷貝到新項目中

我暫時就想到這兩點，童鞋們可以在評論里幫我補充；因為有這么多優點，所以決定有必要將vue組件的常用配置項提煉出來，形成一個組件模板，方便日后項目開發復用

 

<template>
  <div>
    <h1>{{title}}</h1>
    <ChildComponents></ChildComponents>
  </div>
</template>
<script>
//子組件要提前引入，才可使用
import ChildComponents from './ChildComponents.vue'
//也可引入一些公共Js腳本或類庫
import Cookie from '../lib/cookie.js'

//Js部分盡量采用ES6語法，webpack babel插件會轉義兼容
export default {
  //組件私有數據（必須是function，而且要return對象類型）
  data () {
    return {
      title: '組件標題',
      firstName: '',
      lastName: '',
    }
  },
  //父組件傳遞過來的數據（兩種方式聲明：1.數組 2.對象）
  //數組方式
  props: ['age'],
  //對象方式
  /*props: {
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }*/
  //計算屬性
  computed: {
    fullName () {
      return this.firstName + this.lastName
    }
  },
  //監聽
  watch: {
    title (preVal, newVal) {
        console.log(`改變之前的值：${preVal}；改變之后的值：${newVal}`)
    }
  },
  //函數集，自己封裝，便於開發使用
  methods: {
    getCurrentDate () {
      return new Date().toLocaleDateString()
    }
  },
  //生命周期鈎子：實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用
  beforeCreated () {
    console.log('component before created')
  },
  //生命周期鈎子：組件實例完成創建之后調用
  created () {
    console.log('component created')
  },
  //生命周期鈎子：組件實例渲染完成時調用
  mounted () {
    console.log('component mounted')
  },
  //要用到哪些子組件（如果組件已是最小粒度，那么可省略該屬性）
  components: {
    ChildComponents
  }
}
</script>
<style lang="scss" scoped>
/**使用scss編寫樣式，既可提高開發效率，也方便維護
*  scoped省略后，該樣式片段會應用到頁面全局
*  支持import語法引入css文件
*/
@import "../base/reset.css";
div {
  h1 {
    color: #c23a3f;
  }
}

</style>

 

結語

以上組件模板中的配置不是最全的，但都是最常用的，如有遺漏，歡迎大家補充！！