接上一节:VueJS模板template和v-html指令、v-bind指令的使用,Vue组件(Component)是VueJS最重要的特性之一,Vue的组件用于创建自定义元素,这些自定义元素可以在HTML中重用。
1、VueJS全局注册组件看下面创建vue组件的例子,然后理解这些Vue是如何工作的,HTML代码如下:
<
!DOCTYPE html>
<
html lang="zh_CN">
<
head>
<
meta charset="UTF-8">
<
meta name="viewport" content="width=device-width, initial-scale=1.0">
<
meta http-equiv="X-UA-Compatible" content="ie=edge">
<
title>VueJS组件的使用<
/title>
<
script src="http://img.readke.com/220411/0Z33Q564-0.jpg"><
/script>
<
/head>
<
body>
<
div id="component_01">
<
micomponent><
/micomponent>
<
/div>
<
div id="component_02">
<
micomponent><
/micomponent>
<
/div>
<
script src="http://www.srcmini.com/js/component.js"><
/script>
<
/body>
<
/html>
component.js文件内容如下:
Vue.component("micomponent", {
template: "<
div><
h1>VueJS从入门到出门<
/h1><
/div>"
});
var v1 = new Vue({
el: "#component_01"
});
var v2 = new Vue({
el: "#component_02"
});
在html文件中,我们创建了两个div,id为component_01和component_02,在js文件中,和这两个id对应的创建了两个vue视图实例,并且我们创建了一个用于两个视图实例的公共组件。 创建一个Vue组件,可以使用下面的语法:
Vue.component("组件的名称", {
// options 选项
});
一旦组件被创建后,指定的组件名称对应地成为一个自定义元素,在两个创建的Vue实例元素中也可以使用相同的方法,也就是id为component_01和component_02的两个元素都可以使用组件中的内容。
在js文件中,定义的共同组件名称为micomponent,在html文件中是使用相同名称作为一个自定义元素:
<
div id="component_01">
<
micomponent><
/micomponent>
<
/div>
<
div id="component_02">
<
micomponent><
/micomponent>
<
/div>
在js文件中创建的组件中,我们添加了一个模板template到组件元素micomponent,这会在html相关的元素也添加相应的内容。这是注册全局组件的一种方式,它可以作为任何vue实例的一部分,如下面的代码所示:
Vue.component("micomponent", {
template: "<
div><
h1>VueJS从入门到出门<
/h1><
/div>"
});
【快速掌握Vue!VueJS组件Component完全使用教程详解】下面是在浏览器中实际的显示效果:
![快速掌握Vue!VueJS组件Component完全使用教程详解](http://img.readke.com/220411/0Z33T193-2.png)
文章图片
组件被赋予为自定义元素标签,也就是< micomponent> < /micomponent> 。但是,当我们在浏览器中查看相同的内容时,我们不会注意到模板中出现的这些纯HTML自定义标记,如下面的屏幕截图所示:
![快速掌握Vue!VueJS组件Component完全使用教程详解](http://img.readke.com/220411/0Z33SP8-3.png)
文章图片
2、VueJS本地注册组件另外,组件还可以被直接作为了Vue实例的一部分,使用components,如下面的代码所示:
Vue.component("micomponent", {
// 全局组件定义
});
var v1 = new Vue({
el: "#component_01",
components: {
"micomponent": {
template: "<
div><
h1>VueJS从入门到出门<
/h1><
/div>"
}
}
});
var v2 = new Vue({
el: "#component_02",
components: {
"micomponent": {
template: "<
div><
h1>VueJS从入门到入土<
/h1><
/div>"
}
}
});
这个又叫做组件的本地注册,这些本地注册的组件只属于创建的Vue实例的一部分。
3、VueJS组件的data和methods选项 目前,我们已经学习了带有基本选项的基本组件,现在,继续看看其它相关组件选项,如data和methods选项。和Vue实例一样,组件也有data和methods选项,在下面的例子中,我们使用全局注册组件作为例子,html代码和上面的一样,component.js代码如下:
Vue.component("micomponent", {
template: "<
div v-on:mouseover='changetitle()' v-on:mouseout='originaltitle()'><
h1>{{title}}<
/h1><
/div>",
data: function(){
return {
title: "VueJS从入门到出门"
}
},
methods: {
changetitle: function(){
this.title = "VueJS从入门到入土"
},
originaltitle: function(){
this.title = "VueJS从入门到出门";
}
}
});
var v1 = new Vue({
el: "#component_01",
});
var v2 = new Vue({
el: "#component_02",
});
在上面的js代码中,我们可以看到在组件的data中添加数据的是使用一个函数,该函数返回一个数据对象,在这里这个数据对象只有一个属性title,并有一个默认值,这个data属性是用于template模板中,也就是:
template: "<
div v-on:mouseover='changetitle()' v-on:mouseout='originaltitle()'><
h1>{{title}}<
/h1><
/div>"
尽管组件component中的data是一个函数,但是我们依然可以像在Vue实例中一样使用它的属性。另外,该全局组件在methods添加了两个方法,changetitle和originaltitle,前者用于鼠标放在元素上时调用,相应地改变元素的值,这里改变div中h1的值;后者用于鼠标移开鼠标时调用,这里的操作是将h1的默认值恢复。
在这里你可以注意到,上面的模板代码中使用了v-on指令,这个指令用于处理HTML元素的事件属性,和v-bind类似,后面会有关于事件的详细讲解。
下面是上面代码的显示效果:
![快速掌握Vue!VueJS组件Component完全使用教程详解](http://img.readke.com/220411/0Z33V513-4.png)
文章图片
4、VueJS动态组件的使用动态组件(dynamic components),动态组件比上面全局注册和本地注册组件的关系更灵活,使用关键字< component> < /component> 创建,
<
div id="dynamic">
<
component v-bind:is="view"><
/component>
<
/div>
Js代码如下:
var v3 = new Vue({
el: "#dynamic",
data: {
view: "component_03"
},
components: {
"component_03": {
template: "<
div><
h1>从入门到改行<
/h1><
/div>"
}
}
});
输出如下:
![快速掌握Vue!VueJS组件Component完全使用教程详解](http://img.readke.com/220411/0Z33S061-5.png)
文章图片
动态组件使用下面的语法创建:
<
component v-bind:is="view"><
/component>
其中v-bind:is=”view”,赋值为view,view的值其实就是组件名称,该值在JS代码又定义,因此这个is的值必须和Vue中data的值,以及组件名称一一对应,否则不起作用,这么看来,动态组件也不是那么方便,还是看具体项目需要选择使用组件的方式。
推荐阅读
- VueJS计算属性computed用法全解教程
- VueJS模板template完全使用教程
- VueJS开发(Vue实例和组件component实例创建和原理详解)
- VueJS初次使用完全解析
- VueJS开发10个常见知识点整理和问题解析合集
- 当导入有模块的目录时,webpack出错,如何解决()
- 在C和Java中找到给定链表的中间部分
- Python MongoDB drop_index查询用法介绍
- C++中的变量使用详细指南