vue3 全局组件,vue3.0全局组件
组件是Vue.js最强大的功能之一，可以扩展HTML元素，封装可重用代码。本文主要介绍了VUE3学习课程全球组件和本地组件的相关信息，有需要的可以参考。
:
目录
1.概述2。全局组件2.1无组件编写2.2使用组件2.3组件中有变量的组件重用2.4组件中的组件2.5使用组件2.6摘要3。本地组件3.1本地组件的使用3.2附件摘要：vue 3组件的分类全球组件和本地组件摘要
1. 概述
老话说，忍耐是一种策略，也是一种性格的锤炼。
无论如何，今天，让我们来谈谈VUE的全球成分和本地成分。
2. 全局组件
2.1 不使用组件的写法
身体
div id=myDiv/div
/body
脚本
const app=Vue.createApp({
模板：` 1
差异
divhello/div
divzhuifengren/div
/div
`
});
const VM=app . mount( # myDiv )；
这是我们以前不用组件的方式。接下来，我们使用组件来实现相同的效果。
2.2 使用组件
const app=Vue.createApp({
模板：` 1
差异
hello-com /
追风人-com /
/div
`
});
app.component(hello-com ，{
模板：` 1
divhello/div
`
});
app.component(追风人-com ，{
模板：` 1
divzhuifengren/div
`
});
我们在组件中封装了之前的divhello/div和divzhuifengren/div，然后直接标注组件名。
组件的命名规范：建议使用全小写字母，单词间用“-”连接。
2.3 组件中包含变量
const app=Vue.createApp({
模板：` 1
差异
count-com /
/div
`
});
app.component(count-com ，{
data() {
返回{
计数：1
}
},
模板：` 1
div{{count}}/div
Button @click=count=1 加1/button
`
});
2.4 组件的复用
const app=Vue.createApp({
模板：` 1
差异
count-com /
count-com /
count-com /
/div
`
});
从这个例子可以看出，组件的优点是可以重用，组件中的变量是唯一的。
2.5 组件中使用组件
const app=Vue.createApp({
模板：` 1
差异
count-com /
count-com /
count-com /
count-com-2 /
/div
`
});
app.component(count-com-2 ，{
模板：` 1
count-com /
`
});
我们也可以在另一个组件count-com-2中使用count-com组件。
2.6 总结
全局组件，用起来很简单，用app.component函数声明就行了。
一个全局组件可以被另一个全局组件使用。
但是全局组件，只要声明了，即使不使用也会初始化，影响性能。
3. 局部组件
3.1 局部组件的使用
身体
div id=myDiv/div
/body
脚本
const CountCom={
data() {
返回{
计数：1
}
},
模板：` 1
div{{count}}/div
Button @click=count=1 自增加以来/button
`
}
const app=Vue.createApp({
//组件映射
组件：{
count-com :计数
},
模板：` 1
差异
count-com/
/div
`
});
const VM=app . mount( # myDiv )；
本地组件的编写方法是首先声明一个对象，该对象的内容与全局组件的内容相似，然后用该对象映射该组件。
3.2 总结
建议将组件声明的对象的首字母大写，用hump命名单词。
在映射时，组件的名称仍然保持全部小写字母，单词之间用“-”连接。
本地组件如果不使用，就不会被初始化，所以对性能有好处。
附：vue 3 组件的分类 全局组件与局部组件
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题组件/标题的分类
script src=js/vue.js/script
/头
身体
div id=itany
我的喂/我的喂
我的世界
/div
脚本
/**
*全局组件，可用于所有vue实例
*/
Vue.component(my-hello ，{
模板： h3{{name}}/h3 ，
Data:function(){ //在组件中存储数据时，必须是以函数的形式，返回一个对象。
返回{
名字：“爱丽丝”
}
}
});
/**
*本地组件，只能在当前vue实例中使用。
*/
var vm=new Vue({
艾尔：“#伊塔尼”，
数据：{
姓名：“汤姆”
},
组件：{ //本地组件
我的世界:
模板： h3{{age}}/h3 ，
data(){
返回{
年龄：25岁
}
}
}
}
});
/脚本
/body
/html
总结
今天讲了VUE3的全局组件和局部组件，希望对大家的工作有所帮助。
关于VUE3学习教程的全局组件和本地组件的这篇文章到此为止。有关VUE3的全球组件和本地组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。