什么是组件？
组件提供了HTML DOM元素的扩展性，可以把一块代码块封装起来，可以方便维护和重复使用
组件的分类 ：
-
展示型组件
负责呈现 UI 为主的类型，我们很单纯地把资料传递进去，然后 DOM 就根据我们传递进去的数据生成出来。这种组件的好处是可以提升 UI 的重复使用。
-
容器型组件
负责与数据层的 service 沟通， 包含了与 server 端、数据来源做沟通的逻辑，然后再将数据传递给前面所说的展示型组件。
-
互动型组件
负责互动的逻辑，比如 elementUI、bootstrap等 UI Library 都属于这种类型。强调重复使用，像是表单、灯箱等各种互动元素都属于这个类型
-
功能型组件
这个类型的组件本身不渲染任何内容，主要负责将组件内容作为某种应用的延伸，或是某种机制的封装。像是、等。
组件注册：
-
使用组件时使用注册组件的名字为标签，例如:
<list1></list1> -
组件内的data数据要使用函数，因为一个组件可以重复使用多次，如果使用对象 ，修改了一个data中的值所有组件内的data值都会被修改，使用函数每个组件都可以有独立的数据
全局组件：
- 全局组件要写到创建Vue实例的上面，否则会报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<list1></list1>
</div>
</body>
<script>
Vue.component('list1', {
template: `
<div>
<h1>我是组件List1</h1>
<button @click="btnClick">{
{ name }}的按钮</button>
</div>
`,
data() {
return {
name: 'zs'
}
},
methods: {
btnClick() {
console.log('点击了按钮');
}
},
})
var vm = new Vue({
el: '#app'
})
</script>
</html>
局部组件：
-
局部组件在Vue的示例中实现
-
写入components对象内
要加s -
对象内部可以写多个组件
-
组件内也要components对象，还可以写入组件：为
子组件 -
使用的标签为components内组件的对象的key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<father-cp></father-cp>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
// 在Vue实例内写组件 要使用components 加s
components: {
// 某一个组件 父盒子
FatherCp: {
// 父盒子模板内容
template: `
<div @click="fatherClick">我是父亲盒子----{
{ name }}<son-cp></son-cp></div>
`,
// 父盒子data数据
data() {
return {
name: 'zs'
}
},
// 父盒子方法
methods: {
fatherClick() {
console.log('点击了父盒子');
}
},
// 组件内可以嵌套组件 为子组件
components: {
SonCp: {
template: `
<div @click.stop="sonClick">我是儿子盒子----{
{ name }}</div>
`,
data() {
return {
name: 'zs的儿子'
}
},
methods: {
sonClick() {
console.log('点击了子盒子');
}
},
}
}
},
}
})
</script>
</html>
上边的组件的命名规则:
html内使用的是：
<father-cp></father-cp>
组件内的名字为大驼峰：FatherCp