一、什么是組件?
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現為用 is 特性進行了擴展的原生 HTML 元素。
總結:
組件是用來完成特定功能的一個自定義的HTML標簽
例如:
- <body>
- <mytag></mytag>
- </body>
注意: mytag就是一個組件, 該組件必須通過Vue為mytag賦予一定的功能
二、組件的作用
組件是對特點功能代碼(html,css,js)的封裝, 通過組件的名字可以重復利用該組件中的代碼.
組件分類:
全局組件和局部組件
注意：組件的template模板必須有且只有一個根標簽（所有內容必須由一個標簽套起來）。
三、全局組件
1.全局組件的語法: Vue.component("自定義標簽的名字",{配置對象})
2. 全局組件的特點: 2.1 全局組件可以在任何被掛着的標簽中使用.
2.2 全局組件的配置對象中必須包含template屬
3. 全局組件應用場景 如果該組件的特定功能需要在任何被Vue實例掛載的標簽中使用. 推薦使用全局組件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <!--引用全局組件：方式一--> <compon1></compon1> </div> <div id="app2"> <!--引用全局組件：方式二--> <compon2></compon2> </div> <div id="app3"> <!--引用全局組件：方式三--> <compon3></compon3> </div> <!-- ==============================定義組件模板==================================== --> <!--方式二：定義模板（注意：如果使用script標簽，建議加上type="text/template"）--> <script type="text/template" id="compon2"> <!--這個div是根標簽--> <div> <h1>我是網頁</h1> <div> 天天向陽，自強不息 </div> </div> </script> <!--方式三：定義模板（建議使用）--> <template id="temp"> <!--這個div是根標簽--> <div> <h1>我是網頁2</h1> <div> 上天入地 </div> </div> </template> <!--開發版本:vue.js（vue.js代碼網址：https://cn.vuejs.org/v2/guide/installation.html）--> <script type="text/javascript" src="js/vue.js" ></script> <script> /* =======================定義全局組件=================================== */ //定義全局組件（方式一） Vue.component("compon1",{ template:"<h1> 快過來啊 </h1>" }) //定義全局組件（方式二） Vue.component("compon2",{ template:"#compon2" }) //定義全局組件（方式三） Vue.component("compon3",{ template:"#temp" }) /* =======================定義vue實例=================================== */ //掛載vue實例(方式一) var app= new Vue({ el:"#app", }) //掛載vue實例（方式二） var app2= new Vue({ el:"#app2", }) //掛載vue實例（方式三） var app3= new Vue({ el:"#app3", }) </script> </body> </html>
四、局部組件-是定義在某個vue實例上的
1. 局部語法:
var app = new Vue({
el: "#app",
data: {},
components : {
"局部組件的名字1" : {組件的配置對象}
"局部組件的名字2" : {組件的配置對象}
}
});
2. 局部組件的特點
局部組件只能夠在所掛載的標簽中使用.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <!--引用局部組件：方式一--> <compon1></compon1> <hr /> <!--引用局部組件：方式二--> <compon2></compon2> <hr /> <!--引用局部組件：方式三--> <compon3></compon3> </div> <!-- ==============================定義組件模板==================================== --> <!--方式二：定義模板（注意：如果使用script標簽，建議加上type="text/template"）--> <script type="text/template" id="compon2"> <!--這個div是根標簽--> <div> <h1>我是網頁</h1> <div> 天天向陽，自強不息 </div> </div> </script> <!--方式三：定義模板（建議使用）--> <template id="temp"> <!--這個div是根標簽--> <div> <h1>我是網頁2</h1> <div> 上天入地 </div> </div> </template> <!--開發版本:vue.js（vue.js代碼網址：https://cn.vuejs.org/v2/guide/installation.html）--> <script type="text/javascript" src="js/vue.js" ></script> <script> /* =======================定義vue實例=================================== */ //掛載vue實例(方式一) var app= new Vue({ el:"#app", components:{ //定義局部組件（方式一） "compon1":{ template:"<h1> 快過來啊 </h1>" }, //定義局部組件（方式二） "compon2":{ template:"#compon2" }, //定義局部組件（方式三） "compon3":{ template:"#temp" }, } }) </script> </body> </html>
五、 組件中的數據必須是函數
1. 組件中數據的定義 語法: "組件的名字":{ template: "", data : function(){ return { 鍵1:值1, 鍵2:值2 } } }
2.注意事項: 1、data數據只能夠以函數的形式返回,因為函數中可以寫其他的業務代碼。 2、只能夠在各自的組件模板中使用各自的組件中的data數據。 3、Vue對象中的數據不能夠在組件中使用，組件的數據也不能夠在掛載的html標簽上使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <!--這里引用的message是vue實例里的data數據--> {{message}} <!--引用全局組件--> <compon1></compon1> </div> <!-- ==============================定義組件模板==================================== --> <!--定義模板（建議使用）--> <template id="temp"> <!--這個div是根標簽--> <div> <h1>我是網頁2</h1> <div> <!--只能夠在各自的組件模板中使用各自的組件中的data數據--> 上天入地{{message}} </div> </div> </template> <!--開發版本:vue.js（vue.js代碼網址：https://cn.vuejs.org/v2/guide/installation.html）--> <script type="text/javascript" src="js/vue.js" ></script> <script> /* =======================定義vue實例=================================== */ //掛載vue實例(方式一) var app= new Vue({ el:"#app", data:{ message:"哈哈哈哈啊哈！" }, components:{ //定義局部組件（方式一） "compon1":{ template:"#temp", data:function(){ return { message:"武二郎先生" } } } } }) </script> </body> </html>