一、什么是组件?
组件 (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>