Vue(七) 组件详解

组件 (Component) 是 Vue.js 最核心的功能，也是整个框架设计最精彩的部分，当然也是最难掌握的。

组件与复用

组件用法

组件与创建 Vue 实例类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后任何 Vue 实例都可以使用。

全局注册

全局注册示例代码如下：

Vue.component('my-component', {
    //选项
})

my-component 就是注册的组件自定义名称，推荐使用小写加减号分隔的形式命名。

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用 <my-component> 的形式使用组件了，实例代码如下：

<div id="app">
	<my-component></my-component>
</div>
<script>
	Vue.component('my-component', {
        //选项
	});
	
	var app = new Vue({
        el: '#app'
	})
</script>

此时打开页面是空的，因为我们注册的组件没有任何内容，需要在组件选项中添加 template 选项，例如：

Vue.component('my-component', {
    template: '<div>这里是组件内容</div>'
});

渲染后的结果是：

<div id="app">
	<div>这里是组件内容</div>
</div>

template 的DOM结果必须被一个元素包含，如果这里直接写成 “这里是组件的内容”，不带 "<div></div>" 是无法渲染的。

局部注册

在 Vue 实例中，使用 components 选项可以局部注册组件，注册后的组件只有在该实例作用于下有效，组件中也可以使用 components 选项来注册组件，使组件也可以嵌套，例如：

<div id="app">
  <my-component></my-component>
</div>
<script>
    var child = {
        template: '<div>局部注册组件的内容</div>'
    }

    var app = new Vue({
        el: '#app',
        components: {
            'my-component': child
        }
    })
</script>

is属性

Vue 组件的模板在某些情况下会受到 HTML 的限制，比如 <table> 只允许 <tr> <td> <th> 等这些表格元素，所以在 <table> 内直接使用组件是无效的。这种情况下，可以使用特殊的 is 属性来挂载组件，例如：

<div id="app">
    <table>
        <tbody is="my-component"></tbody>
    </table>
</div>
<script>
   Vue.component('my-component', {
      template: '<div>这里是组件的内容</div>'
   });

   var app = new Vue({
       el: '#app',
   })
</script>

tbody 在渲染时，会被替换成组件的内容。常见的限制元素还有 <ul> <ol> <select> 。

data选项

除了 template 选项，组件中还可以像 Vue 实例那样使用其他的选项，比如 data、computed、methods 等。但是在使用 data 时，和实例稍有区别，data 必须是函数，然后将数据 return 出去，例如：

<div id="app">
    <table>
        <tbody is="my-component"></tbody>
    </table>
</div>
<script>
   Vue.component('my-component', {
      template: '<div>{{ message }}</div>',
       data: function () {
          return {
              message: '组件内容'
          }
       }
   });

   var app = new Vue({
       el: '#app',
   })
</script>

使用 props 传递数据

基本用法

组件不仅仅是要把模板的内容复用，更重要的是组件间进行通信。父组件要正向地向子组件传递数据或参数，这个正向传递数据的过程就是通过 props 来实现的。

在组件中使用 props 来声明需要从父组件接收的数据，props 的值可以是两种，一种是字符串数组，一种是对象，先介绍数组的用法，构造一个数组，接收一个来自父级的数据 message，并在模板中渲染，例如：

<div id="app">
    <my-component message="来自父组件的内容"></my-component>
</div>
<script>
   Vue.component('my-component', {
       props: ['message'],
       template: '<div>{{ message }}</div>',

   });

   var app = new Vue({
       el: '#app',
   })
</script>

props 中声明的数据与组件 data 函数 return 的数据主要区别就是 props 的来自父级，而 data 中的是组件自己的数据，作用域是组件本身，这两种数据都能在模板 template 及计算属性 computed 和方法 methods 中使用。

由于 HTML 特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 命名要转为短横分隔命名，例如：

<div id="app">
    <my-component warning-text ="提示信息"></my-component>
</div>
<script>
   Vue.component('my-component', {
       props: ['warningText'],
       template: '<div>{{ warningText }}</div>',
   });

   var app = new Vue({
       el: '#app',
   })
</script>

有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v-bind 来动态绑定 props 的值，当父组件的数据变化时，也会传递给子组件。例如：

<div id="app">
    <input type="text" v-model="parentMessage">
    <my-component :message ="parentMessage"></my-component>
</div>
<script>
   Vue.component('my-component', {
       props: ['message'],
       template: '<div>{{ message }}</div>',
   });

   var app = new Vue({
       el: '#app',
       data: {
           parentMessage: ''
       }
   })
</script>

注意：如果你要直接传递数字，布尔值，数组，对象，但不使用 v-bind，传递的仅仅是字符串，例如：

<div id="app">
    <my-component message ="[1,2,3]"></my-component>
    <my-component :message ="[1,2,3]"></my-component>
</div>
<script>
   Vue.component('my-component', {
       props: ['message'],
       template: '<div>{{ message.length }}</div>',
   });

   var app = new Vue({
       el: '#app',
       data: {
           parentMessage: ''
       }
   })
</script>

同一个组件使用了两次，区别是第二个使用了 v-bind，第一个是 7，第二个是 3。

单向数据流

Vue 2.x 通过 props 传递数据是单向的了，也就是父组件数据变化时会传递给子组件，但是反过来不行。

业务会经常遇到两种需要改变 prop 的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况下可以在 data 内再声明一个数据，引用父组件的 prop，例如：

<div id="app">
    <my-component :init-count="1"></my-component>
</div>
<script>
   Vue.component('my-component', {
       props: ['initCount'],
       template: '<div>{{ count }}</div>',
       data: function () {
           return {
               count: this.initCount
           }
       }
   });

   var app = new Vue({
       el: '#app',
   })
</script>

另一种情况就是 prop 作为需要被转变的原始值传入，这种情况下用计算属性就可以了，例如：

<div id="app">
    <my-component :size="50"></my-component>
</div>
<script>
   Vue.component('my-component', {
       props: ['size'],
       template: '<div :style = "style">组件内容</div>',
       computed: {
           style: function () {
               return {
                   fontSize: this.size + 'px'
               }
           }
       }
   });

   var app = new Vue({
       el: '#app',
   })
</script>

注意：在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，所以 prop 是对象和数组时，在子组件内改变是会影响父组件的。

数据验证

上面所介绍的 props 选项都是一个数组，当 prop 需要验证时，就需要对象写法。

一般当你的组件需要提供给别人使用时，推荐使用数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。

以下是几个 prop 的示例：

Vue.component('my-component', {
    props: {
        //必须是数字类型
        propA: Number,
        //必须是字符串或数字类型
        propB: [String, Number],
        //布尔值，默认为true
        propC: {
            type: Boolean,
            default: true
        },
        //数字，而且是必传
        propD: {
            type: Number,
            required: true
        },
        //如果是数组或对象，默认值必须用一个函数返回
        propE: {
            type: Array,
            default: function () {
                return [];
            }
        },
        //自定义一个验证函数
        propF: {
            validator: function (value) {
                return value > 10;
            }
        }
    }
});

验证的 type类型可以是：

• String
• Number
• Boolean
• Object
• Array
• Function

type 也可以是一个自定义构造器，使用 instanceof 检测。

当 prop 验证失败时，在开发版本下会在控制台抛出一天警告。

组件通信

我们已经知道，父组件向子组件通信，通过 props 传递数据就可以，但 Vue 组件通信的场景不止有这一种，归纳起来，组件通信可以用户下图表示：

组件关系可分为父子组件通信，兄弟组件通信，跨级组件通信。

父子组件通信

自定义事件

当子组件需要向父组件传递数据时，就需要用到自定义事件。子组件用 $emit() 来触发事件，父组件用 $on() 来监听子组件的事件。

父组件可以直接在子组件的自定义标签上使用 v-on 来监听子组件的自定义事件，例如：

<div id="app">
    <p>总数：{{ total }}</p>
    <my-component @increase="getTotal" @reduce="getTotal">
    </my-component>
</div>
<script>
   Vue.component('my-component', {
        template: '
        <div>
            <button @click="handleIncrease">+1</button>
            <button @click="handleReduce">-1</button>
        </div>',
       data: function () {
           return {
               count: 0
           }
       },
       methods: {
            handleIncrease: function () {
                this.count++;
                this.$emit('increase', this.count);
            },
            handleReduce: function () {
                this.count--;
                this.$emit('reduce', this.count);
            }
       }
   });

   var app = new Vue({
       el: '#app',
       data: {
           total: 0
       },
       methods: {
           getTotal: function (total) {
               this.total = total;
           }
       }
   })
</script>

除了用 v-on 在组件上监听自定义组件，也可以监听 DOM 事件，这时可以用 .native 修饰符表示监听一个原生事件，监听的是该组件的根元素，例如：

<my-component v-on:click.native="handleClick"></my-component>

使用 v-model

Vue 2.x 可以在自定义组件上使用 v-model 指令，例如：

<div id="app">
    <p>总数：{{ total }}</p>
    <my-component v-model = "total"></my-component>
</div>
<script>
   Vue.component('my-component', {
        template: '<button @click="handleClick">+1</button>',
       data: function () {
           return {
               count: 0
           }
       },
       methods: {
            handleClick: function () {
                this.count++;
                this.$emit('input', this.count);
            },
       }
   });

   var app = new Vue({
       el: '#app',
       data: {
           total: 0
       }
   })
</script>

仍然是点击按钮加 1 点效果，不过这次的 $emit() 的事件名是特殊的 input，在使用组件的父级并没有在 <my-component> 上使用 @input="hander"，而是直接用了 v-model 绑定一个数据 total。这也可以称作是一个语法糖，因为上面的示例可以间接地用自定义事件实现：

<div id="app">
    <p>总数：{{ total }}</p>
    <my-component @input="getTotal"></my-component>
</div>
<script>
   Vue.component('my-component', {
        template: '<button @click="handleClick">+1</button>',
       data: function () {
           return {
               count: 0
           }
       },
       methods: {
            handleClick: function () {
                this.count++;
                this.$emit('input', this.count);
            },
       }
   });

   var app = new Vue({
       el: '#app',
       data: {
           total: 0
       },
       methods: {
           getTotal: function (total) {
               this.total = total;
           }
       }
   })
</script>

v-model 还可以用来创建自定义的表单输入组件，进行数据双向绑定，例如：

<div id="app">
    <p>总数：{{ total }}</p>
    <my-component v-model="total"></my-component>
    <button @click="handleReduce">-1</button>
</div>
<script>
   Vue.component('my-component', {
       props: ['value'],
       template: '<input :value="value" @input="updateValue">',
       methods: {
            updateValue: function (event) {
                this.$emit('input', event.target.value);
            },
       }
   });

   var app = new Vue({
       el: '#app',
       data: {
           total: 0
       },
       methods: {
           handleReduce: function () {
               this.total--;
           }
       }
   })
</script>

实现这样一个具有双向绑定的 v-model 组件要满足下面两个要求：

• 接收一个 value 属性。
• 在有新的 value 时触发 input 事件。

非父子组件通信

在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景，非父子组件一般有两种，喜爱兄弟组件和跨多级组件。

中央事件总线

在 Vue.js 2.x 中，推荐使用一个空的 Vue 实例作为中央事件总线（bus），也就是一个中介。例如：

<div id="app">
    {{ message }}
    <component-a></component-a>
</div>
<script>
    var bus = new Vue();

    Vue.component('component-a', {
        template: '<button @click="handleEvent">传递事件</button>',
        methods: {
            handleEvent: function () {
                bus.$emit('on-message', '来自组件 component-a 的内容');
            },
        }
    });

     var app = new Vue({
         el: '#app',
         data: {
             message: ''
         },
         mounted: function () {
             var _this = this;
             //在实例初始化时，监听来自 bus 实例的事件
             bus.$on('on-message', function (msg) {
                 _this.message = msg;
             });
         }
     })
</script>

父链

在子组件中，使用 this.(parent 可以直接访问该组件的父实例或组件，父组件也可以通过this.)children 访问它所有的子组件，而且可以递归自上而下无线访问，直到根实例或最内层的组件。例如：

<div id="app">
    {{ message }}
    <component-a></component-a>
</div>
<script>
    Vue.component('component-a', {
        template: '<button @click="handleEvent">传递事件</button>',
        methods: {
            handleEvent: function () {
                //访问到父链后，可以做任何操作
                this.$parent.message = '来自组件 component-a 的内容';
            },
        }
    });

     var app = new Vue({
         el: '#app',
         data: {
             message: ''
         }
     })
</script>

尽管 Vue 允许这么做，但在业务中，子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，很难理解父组件的状态，因为它可能被任意组件修改，理想情况下，只要组件自己能修改它的状态，父子组件最好还是通过 props 和 $emit 来通信。

子组件索引

当子组件较多时，通过 this.$children 来一一遍历我们需要的一个组件实例是比较困难的，尤其在组件动态渲染时，他们的序列是不固定的。Vue 提供了子组件的索引的方法，用特殊的属性 ref 来为子组件指定一个索引名称，例如：

<div id="app">
    {{ message }}
    <button @click="handleRef">通过 ref 获取子组件实例</button>
    <component-a ref="comA"></component-a>
</div>
<script>
    Vue.component('component-a', {
        template: '<div>子组件</div>',
        data: function () {
            return {
                message: '子组件内容'
            }
        }
    });

     var app = new Vue({
         el: '#app',
         data: {
             message: ''
         },
         methods: {
             handleRef: function () {
                 this.message  = this.$refs.comA.message;
             }
         }
     })
</script>

注意：$ref 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用 $refs。

使用 solt 分发内容

什么是 slot

很多网站由一级导航、二级导航、左侧列表、正文、以及底部版权信息 5 个模块组成，如果要将他们都组件化，这个结构可能会是：

<app>
	<menu-main></menu-main>
	<menu-sub></menu-sub>
	<div class="container">
		<menu-left></menu-left>
		<container></container>
	</div>
	<app-footer></app-footer>
</app>

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到 slot，这个过程叫做内容分发。以 <app> 为例，它有两个特点：

• <app> 组件不知道它的挂载点会有什么内容。挂载点的内容是由 <app> 的父组件决定的。
• <app> 组件很可能有自己的组件。

props 传递数据、events 触发事件和 slot 内容分发就构成了 Vue 组件的 3 个 API 来源，再复杂的组件也是由这 3 部分构成的。

作用域

正式介绍 slot 前，需要先知道一个概念：编译的作用域。例如：

<child-component>
	{{ message }}
</child-component>

这里的 message 就是一个 slot，但是它绑定的是父组件的数据，而不是组件 <child-component> 的数据。

父组件的模板的内容是在父组件作用域编译，子组件模板的内容是在子组件作用域内编译。

注意：slot分发的内容，作用域是在父组件上的。

solt用法

单个 Slot

在子组件内使用特殊的 <slot> 元素就可以为这个子组件开启一个 slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代 <slot> 标签及它的内容。例如：

<div id="app">
    <child-component>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </child-component>
</div>
<script>
    Vue.component('child-component', {
        template: '
        <div>
            <slot>
                <p>如果父组件没有插入内容，我将作为、默认出现</p>
            </slot>
        </div>'
    });

     var app = new Vue({
         el: '#app',
     })
</script>

渲染完后的结果为：

<div id="app">
	<div>
		<p>分发的内容</p>
		<p>更多分发的内容</p>
	</div>
</div>

注意：子组件 <slot> 内的备用内容，它的作用是子组件本身。

具名Slot

给 <slot> 元素指定一个 name 后可以分发多个内容，具名 Slot 可以与单个Slot 共存，例如：

<div id="app">
    <child-component>
        <h2 slot="header">标题</h2>
        <p>分发的内容</p>
        <p>更多的正文内容</p>
        <div slot="footer">底部信息</div>
    </child-component>
</div>
<script>
    Vue.component('child-component', {
        template: '
        <div class="container">
            <div class="header">
                <slot name="header"></slot>
            </div>
            <div class="main">
                <slot></slot>
            </div>
            <div class="footer">
                <slot name="footer"></slot>
            </div>
        </div>'
    });

     var app = new Vue({
         el: '#app',
     })
</script>

子组件里声明了 3 个 <slot> 元素，其中 <div class="main"> 内的 <slot> 没有使用 name 特性，它将作为默认 slot 出现，父组件没有使用 slot 特性的元素和内容都将出现在这里。如果没有指定

默认匿名的 slot，父组件内多余的内容片断都将被抛弃。

上面最终的渲染结结果为：

<div class="container">
    <div class="header">
        <h2>标题</h2>
    </div>
    <div class="main">
        <p>分发的内容</p>
        <p>更多的正文内容</p>    
    </div>
    <div class="footer">
        <div>底部信息</div>
    </div>
</div>

作用域插槽

作用域插槽是一种特殊的 slot，使用一个可以复用的模板替换已渲染元素，概念比较难以理解，先看一个简单的示例来了解它的基本用法。例如：

<div id="app">
    <child-component>
        <template scope="props">
            <p>来自父组件的内容</p>
            <p>{{ props.msg }}</p>
        </template>
    </child-component>
</div>
<script>
    Vue.component('child-component', {
        template: '
        <div class="container">
           <slot msg="msg"></slot>
        </div>',
        data: function () {
            return {
                msg: '来自子组件的内容'
            }
        }
    });

     var app = new Vue({
         el: '#app',
     })
</script>

在 <slot> 元素上有一个类似 props 传递数据给组件的写法 msg=“xxx”，将数据传入到了插槽。这里的 props 只是一个临时变量，就像 v-for="item in items" 里面的 item 一样。template 内可以通过临时变量 props 访问来自子组件的数据 msg。

上面渲染后的最终结果为：

<div id="app">
	<div class=="container">
		 <p>来自父组件的内容</p>
		 <p>来自子组件的内容</p>
	</div>
</div>

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项。例如：

<div id="app">
    <my-list :books="books">
        <!-- 作用域插槽也可以是具名的 Slot -->
        <template slot="book" scope="props">
            <li>{{ props.bookName }}</li>
        </template>
    </my-list>
</div>
<script>
    Vue.component('my-list', {
        props: {
            books: {
                type: Array,
                default: function () {
                    return [];
                }
            }
        },
        template: '
                <ul>
                    <slot name="book" v-for="book in books" 
                    :book-name="book.name">
                    <!--这里也可以写默认的 slot 内容-->
                    </slot>
            '
    });

     var app = new Vue({
         el: '#app',
         data: {
             books: [
                 { name: 'Java编程思想'},
                 { name: 'Java核心技术'},
                 { name: 'JS 语言精粹'},
             ]
         }
     })
</script>

访问 slot

Vue.js 2.x 提供了用来访问被 slot 分发的内容的方法 $slots，例如：

div id="app">
    <child-component>
        <h2 slot="header">标题</h2>
        <p>分发的内容</p>
        <p>更多的正文内容</p>
        <div slot="footer">底部信息</div>
    </child-component>
</div>
<script>
    Vue.component('child-component', {
        template: '
        <div class="container">
            <div class="header">
                <slot name="header"></slot>
            </div>
            <div class="main">
                <slot></slot>
            </div>
            <div class="footer">
                <slot name="footer"></slot>
            </div>
        </div>',
        mounted: function () {
            var header = this.$slots.header;
            var main = this.$slots.default;
            var footer = this.$slots.footer;
            console.log(footer);
            console.log(footer[0].elm.innerText);
        }
    });

    var app = new Vue({
        el: '#app',
    })
</script>

$slot 在业务中几乎用不到，在用 render 函数创建组件时会比较有用，但主要还是用于独立组件开发中。