vue.js组件化开发

Vue.extend()

组件化开发是Vue.js非常重要的一个特性，我们可以将一个页面视作一个大的根组件，里面所包含的元素就是不同的子组件，子组件可以在不同的根组件里被调用。我们通常会在一个页面中声明一个Vue实例new Vue({})作为跟组件，生成能被反复使用的子组件就要用到Vue.extend(options)方法，使用方法如下：

var Child=Vue.extend({
    templete:'#child',
    //el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据。
    data:function () {
        return{
            ...,
        }

    },
    ...,
})
Vue.component('child',Child)//全局注册子组件。
//子组件的调用方式。

组件注册

1. 全局注册 
2. 局部注册
3. 注册语法糖

           全局注册

全局注册要在根实例初始化之前注册，这样才能使组件在任意实例中被使用，注册代码如下：

Vue.component('child',Child);

这条语句要写在var vm=new Vue({...})之前，也就是根实例初始化之前，全局注册成功之后，就可以在模块中以定义元素的形式使用组件。

使用方法：

  


var Child=Vue.extend({
  templete : '
这是一个组件
'
})

Vue.component('child',Child);

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

          输出的结果：

  
这是一个组件

          局部注册

顾名思义，局部注册相对于全局注册限定了组建的使用范围，局部注册限定了组件只能在被注册的组件中使用，注册和使用方法如下：

var Child=Vue.extend({
    templete : '
这是一个子组件
'
});

var Parent=Vue.extend({
    templete :'
\
      
这是一个父组件
\
      \
      
',
    components : {
      'my-child'=Child
    }
});

           输出的结果：

   
这是一个父组件
   
这是一个子组件

提示：如果在根实例中调用就会报异常[Vue warn]:提示为未知自定义元素。

           注册语法糖

上述两种注册方式有一个简化的方法，可以直接在注册的时候定义组件构造器选项。

//全局注册
Vue.component('child',{
  templete : '
这是一个组件
'
})
//局部注册
var Parent=Vue.extend({
    templete :'
\
      
这是一个父组件
\
      \
      
',
    components : {
      'my-child'= {
        templete : '
这是一个子组件
'
      }
    }
});

输出的结果和上面常规的注册方式输出结果一样。