Vue组件创建

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

来自官网的例子：

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

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

 

通过Prop向子组件传递数据

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


<blog-post title="My journey with Vue"></blog-post>