什么是组件呢？组件就是component

Vue.component('button-counter', {                //全局组件
  data: function () {              //组件的选项
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'   //模板
})

组件是可以复用的Vue实例，带有名字，也可以说是一个自定义元素

<button-counter>     </button-counter>

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项

这说明了组件就是一个Vue实例也不为过，但是他可以以自定义元素的方式去加入HTML文档

Prop

prop其实就是代表你可以接收的属性，一般用props声明你要接收的属性，然后在自定义元素的时候就可以传入那个值变为属性，一般来说我们会在组件内的模板里用上这个要接收的属性，然后在组件当成自定义元素使用时就能加入并更改这个属性。

具体例子请看

Vue.component('blog-post', {
  props: ['title'],                  //声明我会接收title的值，然后把他化为属性
  template: '<h3>{{ title }}</h3>'         //把将要接收的属性先渲染
})

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
                 ↑这个就是我们要接收的属性了，他类似于直接加入组件里的data选项，所以可以跟模板里的{{title}}渲染

让我们来看看更加明细的例子

JS部分：
Vue.component('blog-post', {
  props: ['title'],             //声明要接收的属性
  template: '<h3>{{ title }}</h3>'
})

HTML部分：
<blog-post title="My journey with Vue"></blog-post>      //可以看见我们使用了组件，然后传入了title属性

上面这部分相当于

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>',
  data:{title:'My journey with Vue'}       //就类似于加入了data中
})

我们可以使用v-bind动态绑定属性

Vue组件的理解

Prop

猜你喜欢