做前端開發(fā)的朋友應(yīng)該沒有不知道組件的交排，我們開發(fā)時所用到的東西饵筑，小到按鈕埃篓，大到表單根资，甚至是功能齊全的整個頁面，只要有被復(fù)用的可能玄帕，就可以將其封裝成一個組件，以便后續(xù)的引用裤纹。那么初學(xué)的朋友肯定很好奇，組件是如何創(chuàng)建的呢锡移，在其他的頁面中，又是如何引用的呢淆珊，今天我們就來做一個簡單的示例演示奸汇。
上一次的教程中施符，我們創(chuàng)建了一個干凈的vue實例，項目工程結(jié)構(gòu)如下所示：
image.png
今天的教程就接著它來——
-
在/src目錄下創(chuàng)建一個新文件夾components浩销，用于存儲以后可能用到的所有組件骨坑，這樣可以使后續(xù)開發(fā)過程更加簡潔清晰。并在components文件夾下創(chuàng)建一個linkToHelloWorld.vue文件欢唾，用來編寫組件的實現(xiàn)代碼。
image.png 仿照 App.vue 的格式礁遣，在linkToHelloWorld.vue文件中寫組件代碼。在本例中杏头，組件其實就是一行字“Hey, It's Vue.js! A great expedition!”
<template>
<div id="vue">Hey, It's Vue! {{ message }}</div>
</template>
<script type="text/javascript">
export default {
//這里需要將模塊引出沸呐，可在其他地方使用
name: "linkToHelloWorld",
data (){
//注意：data即使不需要傳數(shù)據(jù)醇王，也必須return,否則會報錯
return {
message: "A great expedition!"
}
}
}
</script>
<style type="text/css">
#vue{
color: green;
font-size: 32px;
}
</style>
- 讓該組件顯示在主頁面崭添，需要在App.vue中添加以下代碼：
<script>
import linkToHelloWorld from './components/linkTo/linkToHelloWorld'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: { linkToHelloWorld }
}
</script>
在此有幾點需要注意：
- 下面這行代碼必須在<script></script>標(biāo)簽內(nèi)的第一行，它是對linkToHelloWorld組件在本頁面中的引入棘伴；
import linkToHelloWorld from './components/linkTo/linkToHelloWorld'
- linkToHelloWorld.vue文件的地址絕對不能錯屁置；
- data代碼塊后必須加英文逗號焊夸，此處的components: { linkToHelloWorld }對linkToHelloWorld組件進(jìn)行了聲明蓝角。
- 在<template></template>標(biāo)簽內(nèi)使用linkToHelloWorld組件：
<linkToHelloWorld to="linkTo">跳轉(zhuǎn)至HelloWorld</linkToHelloWorld>
此時的主頁面如下：
image.png
當(dāng)然，這只是一個簡單的組件颇象，實際項目中的組件往往涉及數(shù)據(jù)的傳輸和交互并徘，比較復(fù)雜，但原理是相同的麦乞，大家不要把它想的太恐怖了。
無論何時姐直，只要記住：創(chuàng)建新組件声畏、寫樣式、寫方法插龄、傳數(shù)據(jù)，然后在其他頁面引入糠雨、聲明和使用這幾個步驟就好。只要思路清晰了甘邀，執(zhí)行起來就不會有太大困難垮庐。
