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

最新推荐文章于 2024-05-17 14:32:46 发布

m0_62168050

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62168050/article/details/126853615

版权

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的模板语法调用

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

*/

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