您的位置：首页 > Web前端 > Vue.js

VUE3 之 全局组件与局部组件

2022-01-15 17:21 886 查看

1. 概述

老话说的好：忍耐是一种策略，同时也是一种性格磨炼。

 

言归正传，今天我们来聊聊 VUE 的全局组件与局部组件。

 

2. 全局组件

2.1 不使用组件的写法 

<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
template:`
<div>
<div>hello</div>
<div>zhuifengren</div>
</div>
`
});
const vm = app.mount("#myDiv");

这是我们之前不使用组件的写法，接下来我们用组件去实现相同的效果。

 

2.2 使用组件

const app = Vue.createApp({
template:`
<div>
<hello-com />
<zhuifengren-com />
</div>
`
});

app.component('hello-com', {
template: `
<div>hello</div>
`
});

app.component('zhuifengren-com', {
template: `
<div>zhuifengren</div>
`
});

我们把之前的 <div>hello</div> 和 <div>zhuifengren</div> 分别封装在了组件中，然后直接将组件名作为标签即可。

组件名称的命名规范：建议使用全小写字母，单词之间使用 “-” 连接。

 

2.3 组件中包含变量

const app = Vue.createApp({
template:`
<div>
<count-com />
</div>
`
});
app.component('count-com', {
data() {
return {
count : 1
}
},
template: `
<div>{{count}}</div>
<button @click="count += 1">加1</button>
`
});

 

 

2.4 组件的复用

const app = Vue.createApp({
template:`
<div>
<count-com />
<count-com />
<count-com />
</div>
`
});

从这个例子能看出来，组件的好处就是可以复用，且组件中的变量是独享的。

 

2.5 组件中使用组件

const app = Vue.createApp({
template:`
<div>
<count-com />
<count-com />
<count-com />
<count-com-2 />
</div>
`
});
app.component('count-com-2', {
template: `
<count-com />
`
});

我们在另一个组件 count-com-2 中使用 count-com 组件，也是可以的。

 

 

2.6 总结

全局组件，使用起来很简单，只需要使用 app.component 函数声明一下即可。

一个全局组件可以被另一个全局组件使用。

但全局组件，只要声明，即使不使用也会被初始化，影响性能。

 

3. 局部组件

3.1 局部组件的使用

<body>
<div id="myDiv"></div>
</body>
<script>
const CountCom = {
data() {
return {
count : 1
}
},
template: `
<div>{{count}}</div>
<button @click="count += 1">自增</button>
`
}
const app = Vue.createApp({

// 组件映射
components : {
'count-com': CountCom
},
template:`
<div>
<count-com/>
</div>
`
});

const vm = app.mount("#myDiv");

局部组件的写法是，首先声明一个对象，内容和全局组件类似，然后将组件与对象做一个映射。

 

3.2 总结

局部组件声明的对象建议首字母大写，单词间使用驼峰命名。

映射时，组件的名称还保持全小写字母，单词之间使用 “-” 连接。

局部组件，如果不使用，就不会初始化，因此对性能有好处。

 

4. 综述

今天聊了一下 VUE3 的 全局组件与局部组件，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

 

5. 个人公众号

追风人聊Java，欢迎大家关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航