快速掌握Vue!VueJS组件Component完全使用教程详解

接上一节: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完全使用教程详解

文章图片
组件被赋予为自定义元素标签,也就是< micomponent> < /micomponent> 。但是,当我们在浏览器中查看相同的内容时,我们不会注意到模板中出现的这些纯HTML自定义标记,如下面的屏幕截图所示:
快速掌握Vue!VueJS组件Component完全使用教程详解

文章图片
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完全使用教程详解

文章图片
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完全使用教程详解

文章图片
动态组件使用下面的语法创建:
< component v-bind:is="view">< /component>

其中v-bind:is=”view”,赋值为view,view的值其实就是组件名称,该值在JS代码又定义,因此这个is的值必须和Vue中data的值,以及组件名称一一对应,否则不起作用,这么看来,动态组件也不是那么方便,还是看具体项目需要选择使用组件的方式。

    推荐阅读