Vue3组件化
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3组件化相关的知识，希望对你有一定的参考价值。
Component组件是可复用的Vue实例，且带有一个名字，可以把组件作为自定义元素来使用
可以将项目中重复出现的页面结构定义为Vuew的组件实例，或将特殊功能封装成组件：
组件分为：
全局组件和局部组件全局组件，在所有Vue实例中都可以使用
通过应用程序实例app的component()方法来定义
语法：app.component（组件名，选项对象）
1、全局组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 组件名就是条用组件的标签名 -->
<!-- 第三步 组件之间多次条用，互相独立-->
<my-hello></my-hello>
</div>
<!-- 第二步 -->
<template id="content">
<div>
<h3>自定义全局组件</h3>
<p>name:{{name}}</p>
</div>
</template>
<script>
const app=Vue.createApp({
data(){
return{
msg:'welcome'
}
}
})
// 第一步,可以多次调用my-hello，组件进行复用
// app.component('my-hello',{//第一种
app.component('MyHello',{//第二种//采用首字母大写，帕斯卡命名法
//组件的具体定义，组件名建议用短横线连接，全小写
template:'#content',
//组件的数据仓库
data(){
return{
name:'tom'
}
}
})
//这里的vm本身也是一个组件，称为Root根组件
const vm=app.mount("#app");
console.log(app)//应用程序实例
console.log(vm)//Vue实例
</script>
</body>
</html>2、局部组件
局部组件，只能再构建组件的Vue实例的容器范围内使用
依赖于某个Vue实例，通过选项components:{}来定义
语法：
Vue.createApp({
components:{
'component-a':选项对象，
'component-b':选项对象
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<template id="b">
<div>
<h3>组件a</h3>
<comp-a></comp-a>
</div>
</template>
<template id="a">
<div>
<h3>组件a</h3>
<p>{{ msg }}</p>
</div>
<comp-b></comp-b>
</template>
<script>
Vue.createApp({
component:{//局部组件
'comp-a':{//父组件
template:'#a',
data(){
return{
msg:'hellow'
}
},
component:{//局部组件
'comp-b':{//子组件，comp-b只能再comp-a中调用
template:'#b',
data(){
return{
msg:"bbb"
}
}
}
}
}
}
}).mount('#app')
</script>
</body>
</html>
以上是关于Vue3组件化的主要内容，如果未能解决你的问题，请参考以下文章
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段