Vue组件创建

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})

来自官网的例子：

1、data是函数而不是一个实例；如果是一个实例的话，组件复用是，data数据会共享

2、template：就是编写html的地方。注意的是一个vue实例中：template只有一个直接子元素：div

 

通过Prop向子组件传递数据

Vue.component('blog-post', {
  props: ['title'],
  template: '
{{ title }}
'
})