看了之前元件的實作範例,將樣板內容以字串形式在template屬性中撰寫很不容易閱讀,因此Vue提供了單一檔案元件SFC(Single File Component)的檔案格式,可以讓元件程式碼能拆分成獨立檔案。
格式:
<template>
<div>
<!--HTML-->
</div>
</template>
<script>
//JavaScript
</script>
<style>
/*CSS*/
</style>
一個SFC是一個vue檔案(.vue),每個vue檔案是一個完整的元件,
分成三個部分:
SFC裡的template裡是當我們在註冊全域元件時會輸入的字串,一個template只能有一個根元素(root element)。
<template>
<div>
</div>
</template>
一個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,而預設的style是全域管理,如果想要變成局部,可以使用以下語法:
<style scoped>
</style>
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>
。