VUE3学习教程之全局组件和局部组件

2024-11-30 14:44:18

1. 概述

老话说的好：忍耐是一种策略，同时也是一种性格磨炼。

言归正传，今天我们来聊聊 VUE 的全局组件与局部组件。

2. 全局组件

2.1 不使用组件的写法

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        template:`
            <div>
                <div>hello</div>
                <div>zhuifengren</div>
            </div>
        `
    });
    const vm = app.mount("#myDiv");

这是我们之前不使用组件的写法，接下来我们用组件去实现相同的效果。

2.2 使用组件

const app = Vue.createApp({
        template:`
            <div>
                <hello-com />
                <zhuifengren-com />
            </div>
        `
    });

    app.component('hello-com', {
        template: `
            <div>hello</div>
        `
    });

    app.component('zhuifengren-com', {
        template: `
            <div>zhuifengren</div>
        `
    });

我们把之前的<div>hello</div> 和<div>zhuifengren</div> 分别封装在了组件中，然后直接将组件名作为标签即可。

组件名称的命名规范：建议使用全小写字母，单词之间使用 “-” 连接。

2.3 组件中包含变量

const app = Vue.createApp({
        template:`
            <div>
                <count-com />
            </div>
        `
    });
    app.component('count-com', {
        data() {
            return {
                count : 1
            }
        },
        template: `
            <div>{{count}}</div>
            <button @click="count += 1">加1</button>
        `
    });

2.4 组件的复用

const app = Vue.createApp({
        template:`
            <div>
                <count-com />
                <count-com />
                <count-com />
            </div>
        `
    });

从这个例子能看出来，组件的好处就是可以复用，且组件中的变量是独享的。

2.5 组件中使用组件

const app = Vue.createApp({
        template:`
            <div>
                <count-com />
                <count-com />
                <count-com />
                <count-com-2 />
            </div>
        `
    });
    app.component('count-com-2', {
        template: `
            <count-com />
        `
    });

我们在另一个组件 count-com-2 中使用 count-com 组件，也是可以的。

2.6 总结

全局组件，使用起来很简单，只需要使用 app.component 函数声明一下即可。

一个全局组件可以被另一个全局组件使用。

但全局组件，只要声明，即使不使用也会被初始化，影响性能。

3. 局部组件

3.1 局部组件的使用

<body>
    <div id="myDiv"></div>
</body>
<script>
    const CountCom = {
        data() {
            return {
                count : 1
            }
        },
        template: `
            <div>{{count}}</div>
            <button @click="count += 1">自增</button>
        `
    }
    const app = Vue.createApp({

        // 组件映射
        components : {
            'count-com': CountCom
        },
        template:`
            <div>
                <count-com/>
            </div>
        `
    });

    const vm = app.mount("#myDiv");

局部组件的写法是，首先声明一个对象，内容和全局组件类似，然后将组件与对象做一个映射。

3.2 总结

局部组件声明的对象建议首字母大写，单词间使用驼峰命名。

映射时，组件的名称还保持全小写字母，单词之间使用 “-” 连接。

局部组件，如果不使用，就不会初始化，因此对性能有好处。

附：vue 3 组件的分类全局组件与局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的分类</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 全局组件，可以在所有vue实例中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data:function(){ //在组件中存储数据时，必须以函数形式，函数返回一个对象
                return {
                    name:'alice'
                }
            }
        });

        /**
         * 局部组件，只能在当前vue实例中使用
         */
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom'
            },
            components:{ //局部组件
                'my-world':{
                    template:'<h3>{{age}}</h3>',
                    data(){
                        return {
                            age:25
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

总结

今天聊了一下 VUE3 的全局组件与局部组件，希望可以对大家的工作有所帮助

到此这篇关于VUE3学习教程之全局组件和局部组件的文章就介绍到这了,更多相关VUE3全局组件和局部组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解vue.js全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app">  <my-component></my-compo
vue全局组件与局部组件使用方法详解

vue全局/局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件他暴漏的
VUE注册全局组件和局部组件过程解析

这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下全局组件第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'
基于Vue全局组件与局部组件的区别说明

1.组件声明  <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat
Vue组件之全局组件与局部组件的使用详解

组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>&l
深入浅析Vue全局组件与局部组件的区别

1.组件声明  <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat
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 不使用组件的写法 <body> <div id="myDiv&quo
vue全局组件和局部组件的写法介绍

目录全局组件和局部组件写法全局组件引入写法局部组件引入写法 vue全局/局部组件全局组件和局部组件写法 vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. 全局组件引入写法在项目的main.js中: import Vue from 'vue'; import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件 Vue.use(MyComp
vue 组件全局注册和局部注册的实现

全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content
vue.js开发实现全局调用的MessageBox组件实例代码

前言一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件.所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧. 源码 github地址:Talk is che