1.组件化概念
在开发中，我们将页面的某一部分功能编写成一个组件，以后直接在页面中引用即可，如导航栏，轮播图，等，封装成一个个的组件，以后直接使用即可
Vue的官方也推荐我们组件化开发，即一个组件就是一个vue文件
组件化的特点：
- 组件化可以将功能实现模块化,奖该组件需要的html,js,csss代码集中在一起
- 有利于代码的重用性
- 提高开发效率
2.局部组件和全局组件
2.1 局部组件
局部组件只能在当前页面使用，其他组件是无法使用的，建议在开发中尽可能的使用全局组件，也就是单页面开发(一个文件只有一个组件)
局部组件定义在当前组件的components中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 局部组件只能在定义的当前文件中使用-->
<navbar></navbar>
</div>
</body>
<script>
new Vue({
// vue管理的区域,所有的vue语法仅在该区域内生效
el: '#app',
data: {},
// 定义局部组件
components: {
navbar: {
template: `
<div>我是一个局部组件{{ name }}
<button @click="handler">点我</button>
</div>`,
data() {
return {
name: 'kunmzhao'
}
},
methods: {
handler() {
alert('hello')
}
}
}
}
})
</script>
</html>
2.2 全局组件
全局组件定义之后，在任意的vue文件中都可以直接使用，就行html中的div标签
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!-- 引入vue.js-->
7 <script src="js/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <!-- 全局组件的使用-->
12 <navbar></navbar>
13
14 </div>
15 </body>
16 <script>
17 // 定义一个全局组件
18 Vue.component('navbar', {
19 template: `
20 <div>我是一个全局组件{{ name }}
21 <button @click="handler">点我</button>
22 </div>`,
23 // 组件大data必须是一个函数，返回的是一个对象
24 data() {
25 return {
26 name: 'kunmzhao'
27 }
28 },
29 methods: {
30 handler() {
31 alert('hello')
32 }
33 }
34 })
35 new Vue({
36 // vue管理的区域,所有的vue语法仅在该区域内生效
37 el: '#app',
38 data: {},
39 })
40 </script>
41 </html>
View Code
