Vue组件化 ==＞局部组件定义及全局组件定义

Vue组件化 ==＞局部组件定义及全局组件定义
1 、组件化

组件是可复用的 Vue 实例，且带有一个自定义标签名字，项目中把组件作为自

定义元素来使用

组件构成： 将项目中可能被重复使用的页面结构，转换为 vue 的一个组件实

例，以组件组合的方式构成整个项目结构 ，或将特殊实现功能封装成组件进行

特殊调用

在 vue 语法下

组件：基于 vue 语法构成具有固定的页面结构、样式、功能代码的特殊 vue 实例

，这个特殊实例可以以自定义标签方式在 vue 中被重复调用

组件化：将一个完整项目拆分成多个 vue 组件，以组件组合和复用的方式构成整

个项目页面

1.1 、局部组件定义

局部组件构建依赖于一个固定的 vue 实例配置，通过配置实例属性

components:{} 定义

局部组件仅限构建 vue 实例的容器范围中使用

语法构成 ： components:{ name:definition,…… }

参数：

name (string) : 定义组件唯一名称，在页面中作为组件调用的标签名；

definition (Object) ：描述组件的相关配置特性（等效 Vue.createApp 的

options 参数）

用法：

注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

/*

局部组件定义

- 局部组件构建依赖于一个固定的 vue 实例配置，通过配置实例属性 components:{} 定义

- 局部组件仅限构建vue实例的容器范围中使用

- 语法构成：components:{ name:definition,…… }

+ name 为对象属性名用于描述组件名称 -> 当前组件的自定义标签名

-> 组件名称如果是驼峰规则需要将标签名转为连字符格式

+ definition 为对象的属性取值描述组件定义的相关配置

=> 取值 Object-->等同于 createApp(options) options 配置

- vue构建的组件是不能通过应用方式挂载的，vue将组件描述成自定义标签，通过自定义标签指向完成组件的挂载调用

- vue的组件,实际上就是一个vue的实例对象,具有完成的vue响应式功能和页面操作，包含独立生命周期钩子函数，并且实例和实例之间相互独立

!! 响应式功能的隔离（数据、方法、生命周期钩子函数……）

- 组件作为组件标签被调用只能在另外一个vue实例的容器中才会生效，所以vue项目必须是由一个开发者通过createApp 构建的实例进行启动，该实例被叫做Root实例

- 组件标签本质上是由HTML自定义标签演化而来，最终会以vue语法进行渲染和操作，但渲染操作之前仍然是标签，所有支持vue的模板语法调用

！！部分模板语法在组件上具有不同的执行效果；部分模板语法在组件上没有实际应用价值

*/
```
 
    
    
    
    <div id="app">
        <h4>容器模板-msg-{{ msg }}h4>
        
        <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:`
                        
                            自定义组件-msg-{{ msg }}
                            
                        
```
`,
// 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":{ /* ... */ } } })

局部组件之间的嵌套：


"app">
        <h4>容器模板h4>
        <comp-a>comp-a> 
        <h4>容器模板h4>

    <script type="text/x-template" id="tempA">

        <div class="box">

            <h5>自定义组件Ah5>

            <comp-c>comp-c>

            <test-comp>test-comp>

div>

script>

    <script type="text/x-template" id="tempC">

        <div class="box">

            <h5>自定义组件Ch5>

            <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)


    <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>自定义组件Ah5>
            <comp-b>comp-b>
        div>
    script>
    <script type="text/x-template" id="tempB">
        <div class="box">
            <h5 v-test>自定义组件Bh5>
        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>

自定义组件-msg-{{ msg }}

局部组件之间的嵌套：