vue组件及组件间通信

发表于   |   分类于   |  

介绍Vue组件的基本使用

组件是Vue中重要的概念之一。

Vue组件

在开发过程中，可以将页面中的一些HTML元素封装为一个个组件，用这些独立且可复用的组件来构建整个应用，提高了使用性和复用性。
任意类型应用的界面都可以抽象为一个组件树，如下图：

Vue组件的使用

Vue组件的使用步骤

分为三个步骤：

  1. 创建组件构造器
    使用Vue.extend()来创建组件构造器，Vue.extend()传入的是一个对象，使用方法如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var myComponent = Vue.extend({
      //被封装的HTML内容
      template: '<div>first vue component</div>',
      //绑定在这个组件内的数据
      data: '',
      //监听这个组件的事件的方法
      methods: '',
      //用来进行数据通信的属性
      props: ''
    });

  2. 注册组件
    使用Vue.component()来注册组件，Vue.component()传入的是两个参数，第一个参数是组件名，第二个参数是上一步创建的组件构造器，使用方法如下：

    1
    2
    //组件名为my-component，组件构造器为myComponent
    Vue.component('my-component', myComponent);

  3. 使用组件
    首先初始化Vue实例的作用范围，接着在初始化的作用范围内使用组件即可，具体如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--在初始化的作用范围内使用组件-->
    <div id = "app">
    	<my-component></my-component>
    </div>
    <script>
    //初始化Vue实例的作用范围
    var vm = new Vue({
      el: '#app',
    })
    </script>

组件使用的例子

Vue组件一个简单使用例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
        <script>
            var myComponent = Vue.extend({
                template: '<div>first vue component</div>'
            });
            Vue.component('my-component', myComponent);
            
            var vm = new Vue({
                el: '#app',
            });
        </script>
    </body>
</html>

运行结果如下：

由此可以看出，插入的组件和普通的HTML元素没大区别。

但需要注意的一点是，组件必须要插入在Vue的某个实例下，若没有在某个Vue实例下，插入的组件不会生效，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 组件在Vue实例app下，生效 -->
            <my-component></my-component>
        </div>
        <!-- 组件没有在任何Vue实例下，不会生效 -->
        <my-component></my-component>
        <script>
            var myComponent = Vue.extend({
                template: '<div>first vue component</div>'
            });
            Vue.component('my-component', myComponent);
            
            var vm = new Vue({
                el: '#app',
            });
        </script>
    </body>
</html>

运行结果如下：

由此可以看出，没有在某个Vue实例下使用的组件不会生效。

局部注册

语法糖

上面说的Vue组件使用步骤有些繁琐，Vue提供了语法糖来简化这一过程。