vue之组件基础

（1）基本示例

Vue组件示例

        /* 先注册组件，定义一个名为button-component的新组件 */
        Vue.component('button-component',{
            data:function(){
                return {
                    count:0
                }
            },
            template:'<button v-on:click="count++">您点击了{{count}}次</button>'
        })

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="component_area">
     <button-component></button-component>
</div> 

/* 再实例化，构建组件模板 */
var component_area = new Vue({
      el:"#component_area"
});

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。

（2）组件的复用

可以将组件进行任意次数的复用：

<div id="component_area">
    <button-component></button-component>
    <button-component></button-component>
    <button-component></button-component>
    <button-component></button-component>
</div>

注意：①当点击按钮时，每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个新实例被创建。

②data必须是一个函数

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例。如下所示

扫描二维码关注公众号，回复： 5653097 查看本文章

var start_count = {count:0};
/* 先注册组件，定义一个名为button-component的新组件 */
Vue.component('button-component',{
    data:function(){
         return start_count;
    },
    template:'<button v-on:click="count++">您点击了{{count}}次</button>'
})

（3）组件的组织

猜你喜欢