Vue-自定义组件

组件是可复用的Vue实例,我们把重复用到的功能封装成自定义组件

组件的注册

为了能在模板中使用,组件必须先注册

组件的注册分为全局注册和局部注册:

1. 全局注册: 用Vue.component来创建组件,注册之后可以在任何新创建的Vue根实例中使用
2. 局部注册: 在单个Vue格式的文件中创建组件,在需要用到的地方注册

通常选择局部注册

组件的创建

每个Vue格式的文件都可以作为组件来使用

组件的局部注册

通过vue-cli创建的vue工程默认存在一个组件HelloWorld.vue,以它为例:

我们需要在使用组件HelloWorld的vue文件App中引入组件HelloWorld,接着在App的components中注册组件,最后再在template中使用组件

这样就形成了组件树,App.vue就是父组件,内部使用的HelloWorld就是子组件

组件中的数据

自定义组件中的data必须是一个函数:
重复使用的组件间data是相互独立的

data: function () {
  return {
    count: 0
  }
}