iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0
自我挑戰組

從零開始Vue(View)系列 第 22

[Day22]單一檔案元件

  • 分享至 

  • xImage
  •  

看了之前元件的實作範例,將樣板內容以字串形式在template屬性中撰寫很不容易閱讀,因此Vue提供了單一檔案元件SFC(Single File Component)的檔案格式,可以讓元件程式碼能拆分成獨立檔案。
格式:

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

<script>
    //JavaScript
</script>

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

一個SFC是一個vue檔案(.vue),每個vue檔案是一個完整的元件,
分成三個部分:

  1. HTML
  2. JavaScript
  3. CSS

詳談SFC template

SFC裡的template裡是當我們在註冊全域元件時會輸入的字串,一個template只能有一個根元素(root element)。

<template>
    <div>
       
    </div>
</template>

詳談SFC script

一個SFC裡只能有一個script區塊,script裡的內容和之前範例裡有的東西差不多,可以有屬性、方法或是hook function,如果要引入外部資料(js檔)需要用到import或require。

import{helper}from'../myVue.js' //以相對路徑引入自己專案的js檔

<script>
export default{
    name:'元件名稱',
    props:'元件屬性定義(Array/Object)',
    data(){
        return{
            //元件內部資料
        };
    },
    methods:{},
    computed:{},
    watch(){}
};
</script>

詳談SFC style

一個SFC裡可以有多個style,而預設的style是全域管理,如果想要變成局部,可以使用以下語法:

<style scoped>

</style>

SFC中使用其他元件

SFC中也可以加入其他SFC,舉例:現在有兩個SFC分別為A和B,我們想要在A中使用B,方法如下:

<!--A.vue-->
<template>
    <div>
        <p>This is component A.</p>
        <!--使用B.vue-->
        <B></B>
    </div>
</template>

<script>
    import B from './B.vue'; //引入B.vue
    export default{
        components:{
            B //註冊B.vue,使它可以在A.vue中使用
        },
    }
</script>

使用import引入B.vue,並將B加入components屬性,最後在A.vue的模板中使用<B></B>


上一篇
[Day21]元件的基礎操作
下一篇
[Day23]元件的屬性定義
系列文
從零開始Vue(View)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言