组件化开发基础
概念
# 作用：扩展 HTML 元素，封装可重用的代码，目的是复用
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
# 多组件页面和单组件页面
-官方推荐，以后一个组件是一个 xx.vue 文件 ---》编译
# Single-Page application，缩写为 SPA：以后vue项目只有一个页面，看到的页面变化都是组件间的切换
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<demo></demo>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
}
},
})
// 定义组件
app.component('demo',{
// 重点，data必须是个函数，返回一个对象，组件可以在多个地方重复使用，如果就是对象，导致多个组件共用同一个对象的数据，出现错乱
data(){
return{
name:'szw'
}
},
template:
`
<input type="text" v-model="name">
`
})
app.mount('#app')
</script>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<jubu></jubu>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
}
},
components: {
// 定义局部组件
jubu:{
template:`
<button @click="count++">{{count}}</button>
`,
data () {
return {
count:0
}
}
}
}
})
app.mount('#app')
</script>
</html>
小结
学会使用局部组件的用法是最为关键的一步, 其实也蛮好理解:
● 局部组件在编写上就一个对象而已, 里面可以写 data ( ), template : { } ... 等
● 局部组件要先定义, 后再 app (或者父组件) 中进行注册 components: { } 后, 方可在父模板中进行使用
● 局部组件在定义时, 建议首字母要大写这样可读性更高
● 组件即理解为是页面的一部分, 从实现上看即封装在一个 .vue 的单文件(模板, 逻辑, 样式) 中.
● 组件是可以被复用的, 即很多共用功能是可以通过组件封装的.
● 全局组件 app.component: { } 全局挂载, 性能不高, 使用简单.
● 局部组件 components: { } 先定义, 再在父组件中注册, 再使用.
● 局部用时可用一个自定义名字和真实组件映射 如 components: { cj: Counter }
