Vue---全局组件和局部组件

注意：在全局/局部组件中如果含有data属性，那么它必须是一个返回Object的函数！！

1、注册全局组件

<div id="example">
<!--注意这里给组件传递prop的时候必须用中划线分割-->
  <my-component my-message='你好啊'></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>',
//注意：这里虽然用的驼峰原则，但是会被解析成中划线原则(：my-message),
//所以在给这个组件传递props的时候 需要这样写：my-message='你好啊'；
  props : ['myMessage'],
  data : function(p){
      return { p : p++ };
   }
})
// 创建vue实例
new Vue({
  el: '#example'
})

2、局部组件

局部组件只在另一个实例/组件的作用域内存在。

//局部组件
var Child = {
  template: '<div>A custom component!</div>',
  data : function(p){
      return { p  : p++};
   }
}
new Vue({
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})