Vue学习之路（二）---组件

1.Vue提供全局的api,Vue.Component,在写data数据的时候最好用函数返回数据，这样做是为了避免在使用多个这个组件时，数据变化而导致组件的数据都变了。

Vue.component('my-header',{
  template: '',//渲染模板
  data: function () {
    return {
      a: 1,
      b: 2
    }
  }
});

2.Vue组件时具有层级的，便于开发比如说

let myHeader = {
  template: '<div>This is my header</div>',
  data: function (){
    return {
      a: 1,
      b: 2
    }
  }//这里最好是用function的形式返回,防止使用多个组件时，一个组件的数据变化会影响到另外一个组件
};
new Vue({
  el: '#app',
  data: {
    word: 'yang'
  },
  components: {
    'my-header': myHeader
  }
});

在该组件之下还可以写子组件，不过这里是举例子才在一个文件中使用组件，在实际开发中，会把相应的组件放在文件中，方便管理与维护。