快速掌握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>"
});

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

组件被赋予为自定义元素标签，也就是<micomponent></micomponent>。但是，当我们在浏览器中查看相同的内容时，我们不会注意到模板中出现的这些纯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类似，后面会有关于事件的详细讲解。

下面是上面代码的显示效果：

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

输出如下：

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

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

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

1、VueJS全局注册组件

2、VueJS本地注册组件

3、VueJS组件的data和methods选项

4、VueJS动态组件的使用

猜你喜欢