iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
0
Modern Web

30天手把手的vue.js教學!系列 第 15

2020it邦鐵人賽-30天手把手的Vue.js教學 Day15 - 認識Single file components(SFC)

tags: Vue.js ItIron2020

前言

我們在之前認識了vue實體、vue組件以及如何在父子層的組件透過props & emit相互溝通,作為額外補充還簡單介紹了一下slot的概念,也因此體會到了vue組件的方便。今天則要介紹SFC的概念,可謂vue的核心概念之一,但內容並不困難,不用擔心! 我們馬上就開始吧!

什麼是SFC(single file components)

single file components是一個vue檔案,每一個vue檔案就是一個完整的組件,其中包含著三大部分

  • HTML (template)
  • Javascript (script)
  • CSS (style)

一個SFC會有著以下的結構

<template>
    <div>
        <!--HTML-->
    </div>
</template>

<script>
    // JAvaScript
</script>

<style>
    /*CSS*/
</style>

很眼熟對吧,是的。我們目前用的vue pen就是一個標準的SFC~! surprised!

為什麼我們需要SFC

我們在之前的練習中了解到註冊全域vue組件、以及組件的方便性,不過如果你當時有自己註冊過一個全域組件,例如我們昨天的slot範例。

Vue.component("post", {
  template: `
  <div>
    <slot name="title"></slot>
    <slot name="body"></slot>
    <slot></slot>
  </div>
  `,
});

這樣的作法有著一些缺點

  • 全域命名問題,組件名稱不能重複(專案規模大的時候就會比較麻煩)
  • 不支援CSS使用
  • template只能以字串方式撰寫,不支援編輯器highlight與縮排
    在專案規模小的時候不算是太嚴重的問題,但一旦專案規模擴大,這些小細節會相當的煩人,而藉由SFC則可以解決以上的問題,同時SFC還支援webpack等打包建置的服務,使用上可以免去許多問題!

了解SFC template

template區塊的內容就是你在註冊全域組件時寫入的字串,它經過編譯之後會有一模一樣的結果。 一個template只能有一個根元素(root element),也就是說所有的內容都要用一個容器包起來,比如說

<template>
    <div>
        <!--這樣的寫法就是OK的-->
    </div>
</template>

<template>
    <div>
        <h1>我是Danny</h1>
    </div>
    <div>
        <!--這樣的寫法就是出局的-->
    </div>
</template>

值得一提的是,正式上線的Vue3.0以及移除了只能有一個根元素的限制,這點我們會在鐵人賽的最後一併探討:D

template預設的markup是HTML,不過你也可以藉由lang屬性改寫為你習慣的樣板。

<template lang="pug">
    div
      Hello world
</template>

了解SFC script

script區塊就是我們之前探討的各種vue屬性與hooks,一個SFC內只能有一個script區塊,且最終需要輸出成一個vue實體,若你有需要引入外部的js檔案,則可以使用require或是import達成。以下是script標籤內的基本架構

import dayjs from 'dayjs' // 引入npm套件
import {helper} from '../utils.js' // 以相對路徑引入自己專案內的js檔案

export default {
  data() {
    return {
      
    };
  },
  methods: {
  
  },
  computed: {
  
  },
  mounted() {
  
  }
};
</script>

了解SFC style

一個SFC內可以有著複數個style,特別注意的是預設的style是全域管理,如果你只希望在這個組件中套用指定的樣式,可以加入scoped屬性

<style scoped>
    /*CSS*/
</style>

同時你也可以利用lang屬性套用想要的預處理器,像是scss或是stylus之類的(在此之前記得要先透過npm安裝對應的預處理器與loader)

<style  lang="stylus" scoped>
    /*CSS*/
</style>

在single file components中使用其他組件

在SFC內使用其他的vue組件分成幾個部分,首先你需要先透過import載入指定的組件,假設現在有兩個SFC,分別是A、B兩個組件,若我今天想在A中使用B,首先我就必須先載入該組件,就像剛剛在script區塊載入外部的js檔案一樣的寫法

import ComponentA from '../src/components/A.vue' 

接著在該組件加入components屬性

export default {
  components: {
    ComponentA
  }
};
</script>

最後在template中使用

<template>
    <div>
        <component-a></component-a>
    </div>
</template>

特別需要注意的是,不管你引入的組件是如何命名的,一旦你需要在template中使用,一律轉為kebab-case、小寫並以-相連

MyApp -> my-app
componentA -> component-a

結語

今天我們介紹了SFC的基本結構與使用,之後我們搭建本地專案時,你會更清楚SFC的好處! 這裡就容我先賣個關子,我們明天再見囉:D 今天沒有demo,很輕鬆吧!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D

參考文章

vue-官方文件


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day14 - 認識插槽slot基礎用法
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day16 - 認識vue-cli,建立第一個本地的vue專案!
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言