个性化阅读
专注于IT技术分析

快速掌握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="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="component_01">
        <micomponent></micomponent>
    </div>
    <div id="component_02">
        <micomponent></micomponent>
    </div>
    <script src="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>"
});

下面是在浏览器中实际的显示效果:

VueJS自定义并显示全局组件

组件被赋予为自定义元素标签,也就是<micomponent></micomponent>。但是,当我们在浏览器中查看相同的内容时,我们不会注意到模板中出现的这些纯HTML自定义标记,如下面的屏幕截图所示:

在浏览器中查看自定义组件的html代码

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组件使用data和methods选项

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>"
        }
    }
});

输出如下:

VueJS动态组件显示效果

动态组件使用下面的语法创建:

<component v-bind:is="view"></component>

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

赞(0) 打赏
未经允许不得转载:srcmini » 快速掌握Vue!VueJS组件Component完全使用教程详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏