一、Component 组件
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象 为一个组件树。
二、全局组件
1、语法格式
Vue.component("组件名称", {
template: "html代码", // 组件的HTML结构代码
data(){ //组件数据
return {}
},
methods: { // 组件的相关的js方法
方法名(){
// 逻辑代码
}
}
})
注意:
- 组件名以小写开头，采用短横线分割命名: 例如 hello-Word
- 组件中的data 必须是一个函数,注意与Vue实例中的data区分
- 在template模板中, 只能有一个根元素
2、代码演示
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <!-- 使用组件 --> <my-header></my-header> </div> </body> <script src="js/vue.min.js"></script> <script> // 定义全局组件 //组件的命名规则: 一般用短横线进行连接,左边是公司名 右边组件的作用名称 Vue.component("my-header", { template: "<div><h1 @click='test'>{{title}}</h1> </div>", //template模板中 只能有一个根元素 //组件中的data是一个函数 data() { return { title: "测试标题", }; }, methods: { test() { alert("测试方法!"); }, }, }); var Vm = new Vue({ el: "#app", data: {}, methods: {}, }); </script> </html> -
测试结果
三、局部组件
1、语法格式
相比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯一不同就是：局部组件要写在Vue实例里面。
new Vue({
el: "#app",
components: {
组件名: {
// 组件结构
template: "HTML代码",
// data数据
data() { return { msg:"xxxx" };},
},
},
});
2、代码演示
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<test-component></test-component>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var Vm = new Vue({
el: "#app",
data: {},
methods: {},
// 创建组件
components: {
"test-component": {
template: "<div><h1>{{msg}}</h1></div>",
data() {
return {
msg: "测试局部组件！",
};
},
},
},
});
</script>
</html>
注意: 创建局部组件，注意 components，注意末尾有 ‘s’，而全局组件是不用+ ‘s’ 的。这意味着，components 里可以创建多个组件。
-
测试结果
四、组件与模板分离
由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <!-- 使用组件 --> <test-component></test-component> </div> <!-- 将模板写在html中，给模板指定id --> <template id="tmp"> <div> <button @click="test">{{testmsg}}</button> </div> </template> </body> <script src="js/vue.min.js"></script> <script> var Vm = new Vue({ el: "#app", data: {}, methods: {}, components: { "test-component": { template: "#tmp", //此处绑定上面写的template id data() { return { testmsg: "测试消息~", }; }, methods: { test() { alert("测试方法！"); }, }, }, }, }); </script> </html>- 浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。
- 在 html 中，template 标签一定要有一个id，因为通过 id 是最直接被选中的。data 和 methods 等参数，全部都要放到 Vue 实例里面写。
-
测试结果
