Vue中创建全局组件的三种方式

最新推荐文章于 2024-08-30 20:16:31 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-08-30 20:16:31 发布

阅读量4.5k

点赞数 2

分类专栏： Vue.js 文章标签： vue javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_39055970/article/details/106389332

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Vue中创建全局组件的三种方式

什么是组件
组件化和模块化的区别
定义组件的三种方式
注意点

什么是组件

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能，将来我们需要什么功能，就可以去调用对应的组件即可。

组件化和模块化的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

定义组件的三种方式

1、使用 Vue.extend 来创建全局的 Vue组件

（1）定义组件核心代码：

Vue.component('myCom1', Vue.extend({
   // 通过template属性，指定了组件要展示的HTML结构
    template: '<h3>这是一个使 Vue.extend 来创建全局的 Vue组件</h3>'
}));

（2）使用组件：直接把组件的名称，以HTML标签的形式，引入到页面中：

<my-com1></my-com1>

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <!-- 如果要使用组件，直接，把组件的名称，以HTML标签的形式，引入到页面中，即可 -->
        <my-com1></my-com1>
        <my-com1></my-com1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //1、使用 Vue.extend 来创建全局的 Vue组件
        // var com1 = Vue.extend({
        // 通过template属性，指定了组件要展示的HTML结构
        // template: '<h3>这是一个使 Vue.extend 来创建全局的 Vue组件</h3>'
        // });
        //如果使用 Vue.component 定义全局组件的时候，组件名称引用了驼峰命名，
        //则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，要使用 - 连接
        //如果不使用，直接拿组件的名称使用即可
        // Vue.component('myCom1', com1);




        //Vue.component 第一个参数：组件的名称，将来引用组件的时候后，就是一个 标签形式来引入的
        //第二个参数：Vue.component创建的组件，其中template就是要展示的内容
        Vue.component('myCom1', Vue.extend({
            // 通过template属性，指定了组件要展示的HTML结构
            template: '<h3>这是一个使 Vue.extend 来创建全局的 Vue组件</h3>'
        }));

        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>

在这里插入图片描述

2、使用 Vue.component 来创建全局的 Vue组件

（1）定义组件核心代码：

Vue.component('mycom2', {
    template: '<h3>这是一个使 Vue.component 来创建全局的 Vue组件</h3>'
});

（2）使用组件：还是引用标签形式，引入自己的组件：

<mycom2></mycom2>

第二种创建组件方式其实和第一种差不多，只是省略了Vue.extend(）；相对来说简单些。
实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <!-- 还是引用 标签形式 ，引入自己的组件 -->
        <mycom2></mycom2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //不论是那种方式创建出来的组件，组件的template 属性指向的组件模板内筒，只能有一个根元素
        Vue.component('mycom2', {
            template: '<h3>这是一个使 Vue.component 来创建全局的 Vue组件</h3>'
        });
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>

3、在被控制的 #app 外面，使用 template 元素，定义组件的HTML结构

（1）定义组件核心代码：

Vue.component("mycom3", {
    template: '#tmp1'
});

在被控制的 #app 外面，使用 template 元素，定义组件的HTML结构：

<template id="tmp1">
    <div>
        <h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示和高亮</h1>
        <span>Well done！</span>
    </div>
</template>

（2）使用组件：还是引用标签形式，引入自己的组件：

<mycom3></mycom3>

第三种创建组件的方式和前两种区别较大，是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示和高亮。
实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <mycom3></mycom3>
    </div>
    <!-- 在被控制的 #app 外面，使用 tempalte 元素，定义组件的HTML结构 -->
    <template id="tmp1">
        <div>
            <h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示和高亮</h1>
            <span>Well done！</span>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("mycom3", {
            template: '#tmp1'
        });
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        });
    </script>
</body>

</html>

从代码简洁程度上来说，第二种方式会比较好，但是从组件模板代码的书写舒适程度来说，第三种更为讨喜。

注意点

（1）从使用方式上来说，最终都是通过引用标签形式，引入自己的组件
（2）不论是那种方式创建出来的组件，组件的template 属性指向的组件模板内筒，只能有一个根元素
（3）如果使用 Vue.component 定义全局组件的时候，组件名称引用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，要使用 - 连接；如果不使用，直接拿组件的名称使用即可