Vue组件全局注册和局部注册

 

 

 

本文主要将了解Vue全局组件和局部组件注册的思路，来理解Vue CLI组件注册思路

Vue CLI中文官方文档：https://cli.vuejs.org/zh/

Vue CLI安装和项目创建参考文章：
http://blog.java1234.com/blog/articles/543.html
https://segmentfault.com/a/1190000014804826

一、全局组件
定义一个名为 button-counter 的新组件，并全局注册如下。

语法：Vue.component(组件ID，选项对象)      //组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

 

 

二、局部对象
定义一个名为button-counter 的新组件，并局部注册。
1、通过一个普通的 JavaScript 对象来定义组件

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

 

2、注册组件，在使用ComponentA的components 选项中注册想要使用的组件：

var ComponentB = {
components: {
' button-counter': ComponentA    //组件名称：选项对象
},
// ...
}

 

三、模块系统： ComponentA.vue，ComponentB.vue文件分别定义组件A和组件B

从局部对象的选项对象定义可知，主要是必要的template选项以及可选的其他选项。在.vue文件中定义组件适合局部组件类似的。
首先WebStorm 新建一个组件，模板代码如下。下面再在template标签中写template选项的代码，在script标签中导出的组件选项对象中写其他选项。

1、定义组件，ButtonCounter.vue( ComponentA)

2、注册组件，在App.vue( 或ComponentB)组件中要使用ComponentA，注册ComponentA。（以下代码中，由于App组件在main.js中使用，所以也需要导出）