vue组件详解（一）——组件与复用

1、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素，封装可重用的代码。

 

2、组件用法

组件须要注册后才可使用，注册有全局注册和局部注册两种方式。

2.1 全局注册后，任何V ue 实例均可以使用。如：

        <div id="app1">
            <my-component></my-component>
        </div>

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

var app1 = new Vue({
   el: '#app1'
});

 要在父实例中使用这个组件，必需要在实例建立前注册，以后就能够用＜my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含， 若是直接写成“这里是组件的内容”， 不带“<div></ div ＞”是没法渲染的。（并且最外层只能有一个根的<div>标签）

 

2.2 在Vue 实例中，使用component选项能够局部注册组件，注册后的组件只有在该实例做用域下有效。如：

        <div id="app2">
            <my-component1></my-component1>
        </div>

var app2 = new Vue({
   el: '#app2',
   components:{
      'my-component1': {
          template: '<div>这里是局部注册组件的内容</div>'
      }
    }
});

 

2.3 data必须是函数

除了template选项外，组件中还能够像Vue实例那样使用其余的选项，好比data 、computed 、methods等。可是在使用data时，和实例稍有区别， data 必须是函数，而后将数据return 出去。

        <div id="app3">
            <my-component3></my-component3>
        </div>

Vue.component('my-component3',{
    template: '<div>{{message}}</div>',
    data: function(){
        return {
            message: '组件内容'
        }
    }
});
var app3 = new Vue({
    el: '#app3'
});

 通常return的对象不要引用外部的对象，由于若是return 出的对象引用了外部的一个对象， 那这个对象就是共享的， 任何一方修改都会同步。

因此通常给组件返回一个新的独立的data对象。