【Vue3 从入门到实战 进阶式掌握完整知识体系】010-探索组
2021-06-22 本文已影响0人
訾博ZiBo
三、探索组件的理念
1、组件概述
组件图解
组件的概念非常常见，类似于模块的概念
components.png
简单使用
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Vue.createApp() 内的参数组成根组件
const app = Vue.createApp({
template: `
<div>
<!--使用子组件-->
<hello />
<bye />
</div>
`
});
// 注册子组件 hello
app.component('hello',{
template: `
<div>hello</div>
`
});
// 注册子组件 bye
app.component('bye',{
template: `
<div>bye</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613102847084.png
复用组件
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Vue.createApp() 内的参数组成根组件
const app = Vue.createApp({
template: `
<div>
<!--复用组件，数据相互独立-->
<counter />
<counter />
<counter />
</div>
`
});
// 注册子组件 counter
app.component('counter',{
data(){
return{
count: 1
}
},
template: `
<div @click="count += 1">{{count}}</div>
`
});
// 注册子组件 bye
app.component('bye',{
template: `
<div>bye</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613103227862.png
组件可嵌套使用
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Vue.createApp() 内的参数组成根组件
const app = Vue.createApp({
template: `
<div>
<!--复用组件，数据相互独立-->
<counter-parent />
<counter />
<counter />
<counter />
</div>
`
});
// 注册子组件 counter-parent
app.component('counter-parent',{
template: `
<counter />
`
});
// 注册子组件 counter
app.component('counter',{
data(){
return{
count: 1
}
},
template: `
<div @click="count += 1">{{count}}</div>
`
});
// 注册子组件 bye
app.component('bye',{
template: `
<div>bye</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613103546500.png
全局组件
当前我们使用 component 进行组件注册是一种全局注册，只要定义了，处处可以使用，性能不高，但使用简单
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// Vue.createApp() 内的参数组成根组件
const app = Vue.createApp({
template: `
<div>
<!--复用组件，数据相互独立-->
<counter-parent />
<counter />
<counter />
<counter />
</div>
`
});
// 当前我们使用 component 进行组件注册是一种全局注册
// 只要定义了，处处可以使用，性能不高，但使用简单
// 注册子组件 counter-parent
app.component('counter-parent',{
template: `
<counter />
`
});
// 注册子组件 counter
app.component('counter',{
data(){
return{
count: 1
}
},
template: `
<div @click="count += 1">{{count}}</div>
`
});
// 注册子组件 bye
app.component('bye',{
template: `
<div>bye</div>
`
});
const vm = app.mount('#root');
</script>
</html>
局部组件
习惯：定义全局组件使用 - 分割（hello-world），定义局部组件使用帕斯卡命名法（HelloWorld）
定义之后，再进行注册才能用，性能高，使用起来有点复杂；
<!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>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 定义局部组件
const counter = {
data(){
return{
count: 1
}
},
template: `
<div @click="count += 1">{{count}}</div>
`
}
// Vue.createApp() 内的参数组成根组件
const app = Vue.createApp({
// 注册组件
components: {
counter: counter
},
// ES6简写
// components: {
// counter
// },
// 起其他名字
// components: {
// cter: counter
// },
template: `
<div>
<cter />
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613104559185.png
