vue 组件 之 注册 及 组件内data的使用

概述

vue中的组件一个很强大的功能，类似react一样的思想可以让我们开发出高复用的组件，提高我们的开发效率。

注册

vue中的组件分为全局注册和局部注册两种。
全局注册：

Vue.component(
    "cpt"
    ,{
    template:"<div></div>"
    }
);

局部注册：

let v=new Vue({
    el:"#v"
    ,components:{
        cpt:{
            template:"<div></div>"
        }
    }
});

组件使用的时候必须包含在一个vue实例里，并且必须经过实例化

<div id="v">
<cpt></cpt>
</div>

let v=new Vue({
    el:"#v"
});

输出结果为

<div id="v">
<div></div>
</div>

data的使用

有时我们需要在组件中包含一些自定义的数据可以这样做

<div id="v">
<cpt></cpt>
</div>

Vue.component("cpt",{
    template:"<div>{{someText}}</div>"
    ,data:function(){
        return {
            someText:"text"
        }
    }
});

new Vue({
    el:"#v"
});

输出结果为

<div id="v">
<div>text</div>
</div>

注意data必须为一个函数，且返回一个对象。