Vue中怎么實(shí)現(xiàn)一個(gè)單文件組件

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Vue中怎么實(shí)現(xiàn)一個(gè)單文件組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

背景

相信大家在使用Vue開發(fā)項(xiàng)目時(shí)，基本都是以單文件組件的形式開發(fā)組件的，這種方式好處多多：

1.代碼集中，便于開發(fā)、管理和維護(hù)

2.可復(fù)用性高，直接將vue文件拷貝到新項(xiàng)目中

我暫時(shí)就想到這兩點(diǎn)，童鞋們可以在評(píng)論里幫我補(bǔ)充；因?yàn)橛羞@么多優(yōu)點(diǎn)，所以決定有必要將vue組件的常用配置項(xiàng)提煉出來，形成一個(gè)組件模板，方便日后項(xiàng)目開發(fā)復(fù)用

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

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

</style>

上述就是小編為大家分享的Vue中怎么實(shí)現(xiàn)一個(gè)單文件組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。