https://cn.vuejs.org/v2/guide/components.html
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同:
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
看来上面的这些定义,应该还不能很好得去理解,下面来逐个方式使用完整代码来进行示例。
使用Vue.extend
创建组件也有两种方式,第一种就是使用变量来传递创建的组件(上面示例中的写法),第二种就是直接写到Vue.component
中,不需要变量来传递了。
这两种的写法效果都是一样的,下面分别来示例一下看看。
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>
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>
-
来引用创建的组件在上面创建的两个组件示例中,可以看到两个组件的命名是驼峰法命名(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
可以看到已经可以正常渲染组件的内容了,那么组件还可以重复多次渲染,每次渲染引用则会单独创建一个新的对象。
image-20200203155701528
查看浏览器显示如下:
image-20200203160247395
在上面使用Vue.extend
创建组件的时候,可以不用中间变量,直接写入Vue.component
中进行组件创建以及注册。
那么其实只要简写一下,就可以直接用Vue.component
创建组件,如下:
image-20200204001021591
可以对比看出,只要将Vue.extend
去除,就是直接简写使用Vue.component
来创建组件了。
将mycom3
在模板中使用,并且浏览器查看如下:
image-20200204001236328
image-20200204001258623
在上面的示例中,讲解了如何去定义、注册全局组件的两种方式,但是还没有暴露一个问题。
这个在上面的说明中有提到要注意,那么这个问题到底是什么问题呢?
在组件的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
标签中。
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>
上面讲诉的内容是如何定义全局组件,但是还有一种情况就是需要定义私有组件,因为并不是每个组件都需要进行全局共享的。
那么这时候只需要将组件定义到vm
实例中的components
属性内即可。
vm
示例image-20200204110402788
在一个html文件中可以创建多个vm实例的,下面在浏览器打开来看看效果,如下:
image-20200204110819376
image-20200204112958971
在浏览器查看一下效果,如下:
image-20200204113035642
image-20200204113149079
打开浏览器查看,如下:
image-20200204113254079
可以看到vm2实例因为没有注册这个组件,所以直接引用就会报错。如果要解决这个问题,那么就需要在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>
image-20200210214836666
可以看到下面的简写方式就是将组件对象直接写在components
下。下面将已经简写与未简写的两种放行进行对比。
components:{ // 注册私有组件
"mycom1": mycom1, // 未简写的方式
},
components:{ // 注册私有组件
mycom1, // 简写的方式
},
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>