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

Vue中定义组件的三种方式什么是组件组件化和模块化的区别定义组件的三种方式1、使用 Vue.extend 来创建全局的 Vue组件2、使用 Vue.component 来创建全局的 Vue组件3、在被控制的 #app 外面，使用 tempalte 元素，定义组件的HTML结构注意点什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能，将来我们需要什么功能

Sheldon一蓑烟雨任平生

4613人浏览 · 2020-05-27 21:16:55

Sheldon一蓑烟雨任平生 · 2020-05-27 21:16:55 发布

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 定义全局组件的时候，组件名称引用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，要使用 - 连接；如果不使用，直接拿组件的名称使用即可

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^