如何创建Vue组件

川长思鸟来 2022-12-10 14:38 213阅读 0赞

# Vue 组件 的创建方式 #

## 一、什么是组件化 ##

对于组件化,大家都会说出是独立和通常可复用的这么一句话,可是面试官要问你的话…

**面试官:** 请谈谈你对Vue 的组件化的理解

我总结了一下,感觉可以这么回答

**面试者:** 组件系统是 Vue 的另一个重要概念,在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。**就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。**`分而治之`,页面就是一个个的组件组成的,;比如我们的导航栏,下拉菜单,列表等都可以是组件,当我们不想要某个组件,也可以随意的进行替换和删除

使用组件可以 1. 提高开发效率 2.重复使用 3.提高整个项目的可维护性 4.便于协同开发

![cbd7f2450b32b266f7e16b7eed3ba168.png][]

## 二、如何创建组件 ##

### 1. 通过extend方式 ###

这种方式创建的是全局组件,在template 中展示html内容

//创建组件对象
    var com1 = Vue.extend({ 
            template: "<h3>你好世界</h3>"
        })

通过 Vue.component(‘组件的名称’, 创建出来的组件模板对象) 来添加我们的组件

Vue.component("myCom",com1);

组件的使用只需要在我们挂在了vue的html 写标签就行了, 标签的名字是我们的注册组件的名称

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <my-com></my-com>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // 1.使用 Vue.extend 来创建全局的Vue组件
        var com1 = Vue.extend({ 
            template: "<h3>你好世界</h3>"
        })
        // 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
        Vue.component("myCom",com1);
        const app = new Vue({ 
            el: '#app'
        })
    </script>
    </body>
    </html>

`注意`组件的名称如果是采用驼峰命名的,需要用 “-” 连接,不然vue识别不了

### 2.上面的写法可以简写为: ###

Vue.component("myCom",Vue.extend({ 
          template: "<h3>简写写法</h3>"
      }))

还可以把extend简写

Vue.component("myCom",{ 
         template: "<h2> 第二种创建的方式 </h2>"
     })

在创建的组件中,template中的跟html元素只能有一个

//这样是不行的
     var com1 = Vue.extend({ 
            template: "<h3>你好世界</h3><h3>你好世界</h3>"
        })

![image-20200926162229276][]

![image-20200926162405867][]

所以我们一般都在最外围写一个div标签

### 4.定义私有的组件 ###

上面的方式定义的组件是全局的,我们可以在Vue实例中定义一个组件,这个组件只在这个Vue实例中使用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h2>组件一</h2>
    <div id="app">
        <my-com></my-com>
        <my-com></my-com>
        <my-com2></my-com2>    
    </div>
    <hr>
    <h2>组件二</h2>
    <div id="app2">
        <my-com2></my-com2>
    </div>
    <div id="com2">我很好</div>
    <script src="../js/vue.js"></script>
    <script>
        // 1.使用 Vue.extend 来创建全局的Vue组件
        var com1 = Vue.extend({ 
            template: "<h3>你好世界</h3><h3>你好世界</h3>"
        })
        // 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
        Vue.component("myCom", com1);
        const app = new Vue({ 
            el: '#app',
        })
    
        const app2 = new Vue({ 
            el: '#app2',
            components: {    // 定义私有组件 components
                myCom2: {     //组件名称 myCom2
                    template: '#com2'
                }
            }
        })
    </script>
    </body>
    </html>

定义的私有组件 只能在自己注册的vue实例中运行,否则会报错,提示我我们找不到 myCom2这个组件

![image-20200926163727645][]

[cbd7f2450b32b266f7e16b7eed3ba168.png]: /images/20221123/3526fa6518354b16adfc7199411067cc.png
[image-20200926162229276]: /images/20221123/515a7ab28f64471ab674aa64014b5915.png
[image-20200926162405867]: /images/20221123/333c6380ea584d2b8bf38b2497504f7c.png
[image-20200926163727645]: /images/20221123/5d7da86ecde84d0cb031304a9554416d.png