1 、组件化
组件是可复用的 Vue 实例，且带有一个自定义标签名字，项目中把组件作为自
定义元素来使用
组件构成： 将项目中可能被重复使用的页面结构 ，转换为 vue 的 一个组件实
例，以组件组合的方式 构成 整个项目结构 ，或将特殊实现功能封装成组件进行
特殊调用
在 vue 语法下
组件：基于 vue 语法构成具有固定的页面结构、样式、功能代码的特殊 vue 实例
，这个特殊实例可以以自定义标签方式在 vue 中被重复调用
组件化：将一个完整项目拆分成多个 vue 组件，以组件组合和复用的方式构成整
个项目页面
1.1 、局部组件定义
局部组件构建依赖于一个固定的 vue 实例配置，通过配置实例属性
components:{} 定义
局部组件仅限构建 vue 实例的容器范围中使用
语法构成 ： components:{ name:definition,…… }
参数 ：
name (string) : 定义组件唯一名称，在页面中作为组件调用的标签名；
definition (Object) ：描述组件的相关配置特性（等效 Vue.createApp 的
options 参数）
用法 ：
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
<body>
<!-- 只会被识别为html的自定义标签 -->
<!-- <film-item></film-item> -->
<hr>
<div id="app">
<h4>容器模板-msg-{{ msg }}</h4>
<!-- vue组件的挂载操作 -->
<film-item></film-item>
<film-item v-for="item in 10"></film-item>
<h4>容器模板</h4>
</div>
<script type="module">
import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
createApp({
data(){
return {
msg:"父组件变量msg"
}
},
components:{
FilmItem:{
template:`
<div class="box">
<h5>自定义组件-msg-{{ msg }}</h5>
<input type='text' v-model="msg">
</div>
`,
// vue中data取值方法返回对象格式，是为了保证vue实例被复用时，数据间相互独立
// 而这种JS代码的定义规则被叫做 工厂函数
data(){
return {
msg:"FilmItem-msg"
}
},
beforeCreate() {
console.log("FilmItem-beforeCreate")
},
mounted() {
console.log("FilmItem-mounted")
},
}
}
}).mount("#app")
</script><!-- 以组件名称作为自定义标签名，在页面中调用启动组件生命周期 -->
<component-a></component-a>
<component-b></component-b>
Vue.createApp({ components:{
"ComponentA":{ /* ... */ }
"component-b":{ /* ... */ } } })局部组件之间的嵌套：
<div id="app">
<h4>容器模板</h4>
<comp-a></comp-a>
<h4>容器模板</h4>
</div>
<script type="text/x-template" id="tempA">
<div class="box">
<h5>自定义组件A</h5>
<comp-c></comp-c>
<test-comp></test-comp>
</div>
</script>
<script type="text/x-template" id="tempC">
<div class="box">
<h5>自定义组件C</h5>
<child-comp></child-comp>
</div>
</script>
<script type="module">
import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
import CompD from "./components/CompD.js"
createApp({
components:{
CompA:{
template:"#tempA",
components:{
TestComp:CompD,
CompC:{
template:"#tempC",
components:{
ChildComp:CompD
} }} },}
}).mount("#app")
</script> 1.2 、全局组件定义
全局组件的定义，依赖于 Vue 构造函数提供的全局组件定义函数
app.component()
定义的全局组件，可以在项目的 任意位置进行使用
语法构成 ：
参数 ：
name(string) : 定义组件唯一名称，在页面中作为组件调用的标签名
definition (Function | Object) ：描述组件的相关配置特性
用法 ：
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
<!-- 以组件名称作为自定义标签名，在页面中调用启动组件生命周期 -->
<component-a></component-a>
<component-b></component-b>
const app = Vue.createApp({/* ... */}).mount("#app");
app.component("CompoentA", definition)
app.component("compoent-b", definition)<body>
<div id="app">
<h4 v-test>容器模板</h4>
<comp-a></comp-a>
<comp-b></comp-b>
<h4>容器模板</h4>
</div>
<script type="text/x-template" id="tempA">
<div class="box">
<h5 v-test>自定义组件A</h5>
<comp-b></comp-b>
</div>
</script>
<script type="text/x-template" id="tempB">
<div class="box">
<h5 v-test>自定义组件B</h5>
</div>
</script>
<script type="module">
import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
// import CompD from "./components/CompD.js"
const app = createApp({
})
/*
使用应用方法 app.component(name,definition) 完成全局组件的定义
+ name 为自定义组件名 规则等效于 局部组件定义
+ definition 为自定义组件的相关配置 规则等效于 局部组件定义
全局组件使用时一定需要小心避免 ，全局组件相互嵌套时造成的死循环调用
*/
app.component("CompA",{
template:"#tempA",
})
app.component("CompB",{
template:"#tempB",
})
app.directive("test", function(){
console.log("全局指令test");
})
app.mount("#app")
</script>