32. Vue组件的定义以及创建方式

官网说明

https://cn.vuejs.org/v2/guide/components.html

定义Vue组件

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

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

全局组件定义的三种方式

1. 使用 Vue.extend 配合 Vue.component 方法：

   var login = Vue.extend({
   template: '<h1>登录</h1>'
    });
    Vue.component('login', login);

2. 直接使用 Vue.component 方法：

   Vue.component('register', {
   template: '<h1>注册</h1>'
    });

3. 将模板字符串，定义到script标签种：

   <script id="tmpl" type="x-template">
   <div><a href="#">登录</a> | <a href="#">注册</a></div>
   </script>

   同时，需要使用 Vue.component 来定义组件：

   Vue.component('account', {
   template: '#tmpl'
    });

❝

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

❞

看来上面的这些定义，应该还不能很好得去理解，下面来逐个方式使用完整代码来进行示例。

使用 Vue.extend 配合 Vue.component 方法创建组件

使用Vue.extend创建组件也有两种方式，第一种就是使用变量来传递创建的组件（上面示例中的写法），第二种就是直接写到Vue.component中，不需要变量来传递了。

这两种的写法效果都是一样的，下面分别来示例一下看看。

1.使用变量来传递创建的组件

image-20200203153127665

<script>
// 使用 Vue.extend 来创建全局的Vue组件
// 1.1 使用 Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
    })
// 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
    Vue.component('myCom1', com1)

// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {},
    })
</script>

2.直接将Vue.extend创建的组件写到Vue.component中

image-20200203153648824

<script>
// 使用 Vue.extend 来创建全局的Vue组件
// 1.1 使用 Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
    })
// 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
    Vue.component('myCom1', com1)

// 1.3 直接将Vue.extend创建的组件写到Vue.component中
    Vue.component('myCom2', Vue.extend({
template: '<h4>直接将Vue.extend创建的组件写到Vue.component中</h4>'
    }))

// 2\. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {},
    })
</script>

3.对于命名为驼峰法的组件，需要使用-来引用创建的组件

在上面创建的两个组件示例中，可以看到两个组件的命名是「驼峰法命名」（myCom1, myCom2），那么使用组件引用的时候，需要设置为-的写法： <my-com1></my-com1> <my-com2></my-com2>

• 那么为了说明这种情况，那么先来一个「错误的示例」，如下：

打开浏览器查看报错的信息如下：

错误提示如下：

vue.js:634 [Vue warn]: Unknown custom element: <mycom1 style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">- did you register the component correctly? For recursive components, make sure to provide the "name" option.</mycom1>

(found in <root style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">)</root>

可以看到错误信息就是说找不到元素 mycom1, 请确认是否正确注册该组件。

• 解决的方法：将驼峰命名的组件，在渲染模板的时候修改为-写法，如下：

image-20200203155104479

查看浏览器正确显示组件的信息，如下：

image-20200203155234341

可以看到已经可以正常渲染组件的内容了，那么组件还可以重复多次渲染，每次渲染引用则会单独创建一个新的对象。

4.渲染多个组件

image-20200203155701528

查看浏览器显示如下：

image-20200203160247395

直接使用 Vue.component 方法创建组件

在上面使用Vue.extend创建组件的时候，可以不用中间变量，直接写入Vue.component中进行组件创建以及注册。

那么其实只要简写一下，就可以直接用Vue.component创建组件，如下：

image-20200204001021591

可以对比看出，只要将Vue.extend去除，就是直接简写使用Vue.component来创建组件了。

将mycom3在模板中使用，并且浏览器查看如下：

image-20200204001236328image-20200204001258623

将模板字符串，定义到template标签中

在上面的示例中，讲解了如何去定义、注册全局组件的两种方式，但是还没有暴露一个问题。

问题：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹

这个在上面的说明中有提到要注意，那么这个问题到底是什么问题呢？

在组件的template定义模板内容中，上面的示例的内容大致如下：

image-20200204002549883

从图中看到我前面的示例中的template内容只写了一个html元素，下面来看看如果写多个html元素会如何报错，如下：

image-20200204003334683

在浏览器中查看错误如下：

image-20200204003421986

错误信息如下：

vue.js:634 [Vue warn]: Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1  |  <h5>直接使用 Vue.component 方法创建组件 mycom3</h5><span>写多一个html元素span</span>
   |                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^

found in

---> <Mycom3>
       <Root>

这个错误信息就是因为在template中写了两个html元素导致的，在Vue框架中对于组件是只能有一个唯一的根元素的。因为这两个html元素相互独立，那么就相当于有两个「根元素」。

解决的办法就是再写一个div来包裹这两个元素，保证只有一个唯一的根元素。

image-20200204003733797

再回到浏览器，查看信息如下：

image-20200204003810650

好了，从这里已经可以看出template的组件内容可以写多个html元素，并且可以写得比较复杂。如果当作字符串一直写是挺麻烦的，又没有命令提示，体验很差。

那么可以将这部门的字符串内容提取出来，写到一个template标签中。

将模板字符串，定义到template标签

image-20200204004452774

浏览器显示如下：

image-20200204004510541

可以看到正常显示模板内容。

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--  1.导入vue.js库  -->
<script src="lib/vue.js"></script>

</head>
<body>

<div id="app">

<!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面 -->
<!-- <myCom1></myCom1> -->
<!-- 对于驼峰命名的组件，需要修改为 - 写法 -->
<my-com1></my-com1> 
<my-com1></my-com1>

<hr>

<my-com2></my-com2> 
<my-com2></my-com2> 

<hr>

<mycom3></mycom3>

<hr>

<my-com5></my-com5>

</div>

<!-- 定义组件的template内容 -->
<template id="tpl1">
<div>
<h5>使用template标签编写组件内容</h5>
<span>html元素span</span>
</div>
</template>

<script>

// 1.5 将模板字符串，定义到template标签
            Vue.component('my-com5',{
template: '#tpl1',
            })

// 使用 Vue.extend 来创建全局的Vue组件
// 1.1 使用 Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件myCom1</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
            })
// 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
            Vue.component('myCom1', com1)

// 1.3 直接将Vue.extend创建的组件写到Vue.component中
            Vue.component('myCom2', Vue.extend({
template: '<h4>直接将Vue.extend创建的组件myCom2写到Vue.component中</h4>'
            }))

// 1.4 直接使用 Vue.component 方法创建组件
            Vue.component('mycom3',{
template: '<div><h5>直接使用 Vue.component 方法创建组件 mycom3</h5><span>写多一个html元素span</span></div>'
            })

// 2\. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {},
            })
</script>

</body>
</html>

使用components定义私有组件

上面讲诉的内容是如何定义全局组件，但是还有一种情况就是需要定义私有组件，因为并不是每个组件都需要进行全局共享的。

那么这时候只需要将组件定义到vm实例中的components属性内即可。

示例：创建私有组件

1.首先创建两个vm示例

image-20200204110402788

在一个html文件中可以创建多个vm实例的，下面在浏览器打开来看看效果，如下：

image-20200204110819376

2.在vm1创建一个私有的组件

image-20200204112958971

在浏览器查看一下效果，如下：

image-20200204113035642

3.在vm2引用vm1的私有组件，查看报错信息

image-20200204113149079

打开浏览器查看，如下：

image-20200204113254079

可以看到vm2实例因为没有注册这个组件，所以直接引用就会报错。如果要解决这个问题，那么就需要在vm2也注册这个组件。

4.在vm2注册私有组件，解决报错

image-20200204113436534

浏览器展示如下：

image-20200204113509997

完整实例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--  导入vue.js库  -->
<script src="lib/vue.js"></script>

</head>
<body>

<div id="app1">
<h1>{{ msg }}</h1>

<!-- 引用私有组件my-com1 -->
<my-com1></my-com1>
</div>

<div id="app2">
<h1>{{ msg }}</h1>

<!-- 引用私有组件my-com1 -->
<my-com1></my-com1>
</div>

<!-- 创建组件内容 -->
<template id="tpl1">
<h2>创建vm1实例的私有组件</h2>
</template>

<script>        
// 创建第一个Vue的实例
var vm1 = new Vue({
el: '#app1',
data: {"msg": "这是vm1实例"},
components:{ // 注册私有组件
"my-com1": {
template: "#tpl1",
                    }
                },
            })

// 创建第二个Vue的实例
var vm2 = new Vue({
el: '#app2',
data: {"msg": "这是vm2实例"},
components:{ // 注册私有组件
"my-com1": {
template: "#tpl1",
                    }
                },
            })

</script>

</body>
</html>

示例：私有组件创建的简化方式

1.将组件设置为一个变量，并以简写的方式写入私有组件中。

image-20200210214836666

可以看到下面的简写方式就是将组件对象直接写在components下。下面将已经简写与未简写的两种放行进行对比。

• 未简写的写法：

components:{ // 注册私有组件
"mycom1": mycom1, // 未简写的方式
},

• 简写后的写法：

components:{ // 注册私有组件
    mycom1, // 简写的方式
},

2.简写后的组件与定义的注册名一直，将其渲染到模板中

image-20200210215851163

浏览器显示如下：

image-20200210215916158

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--  导入vue.js库  -->
<script src="lib/vue.js"></script>

</head>
<body>

<div id="app1">
<h1>{{ msg }}</h1>

<!-- 引用私有组件my-com1 -->
<mycom1></mycom1>
</div>

<div id="app2">
<h1>{{ msg }}</h1>

<!-- 引用私有组件my-com1 -->
<mycom1></mycom1>
</div>

<!-- 创建组件内容 -->
<template id="tpl1">
<h2>创建vm1实例的私有组件</h2>
</template>

<script>    
// 创建组件my-com1
var mycom1 = {
template: "#tpl1"
            }

// 创建第一个Vue的实例
var vm1 = new Vue({
el: '#app1',
data: {"msg": "这是vm1实例"},
components:{ // 注册私有组件
"mycom1": mycom1, // 未简写的方式
                },

            })

// 创建第二个Vue的实例
var vm2 = new Vue({
el: '#app2',
data: {"msg": "这是vm2实例"},
components:{ // 注册私有组件
                    mycom1, // 简写的方式
                },
            })

</script>

</body>
</html>

 

交流QQ群：

 

点击下面，查看更多Vue系列文章