vue-组件基础-白红宇

基本参考了官网，按照自己的思路理一理。

1，基本示例

我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

// 定义一个名为 button-counter 的新组件Vue.component('button-counter', {  data: function () {    return {      count: 0    }  },  template: ''})复制代码

new Vue({ el: '#components-demo' })复制代码

2，组件的复用

2.1，组件的特性

组件是可任意次数复用的 Vue 实例

组件可以作为自定义元素来使用
- 每用一次组件，就会有一个它的新实例被创建。
- 每个组件都会各自独立维护它的 data等实例属性

2.2，`data`是函数

为了保证，每个实例可以维护一份被返回对象的独立的拷贝:

data: function () {  return {    count: 0  }}复制代码

3，组件的组织

通常，会以一棵嵌套的组件树的形式来组织

4，组件注册类型

4.1，全局注册

Vue.component('my-component', {  // ... options ...})复制代码

全局注册，意味着在注册之后可以用在，任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

Vue.component('component-a', { /* ... */ })Vue.component('component-b', { /* ... */ })Vue.component('component-c', { /* ... */ })new Vue({ el: '#app' })复制代码

任何新创建的 Vue 根实例 (new Vue) 的模板，指：

因为，在开发中，一般都是以App文件作为根模板，即根实例的模板，其他的都是其后代模板。如下代码所示：

import Vue from 'vue'import App from './App'import router from './router'/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
    '})复制代码

所以，所有的后代模板都可以使用全局注册的组件。

所以，全局注册的组件，在各自的内部，也可以互相使用

4.2，局部注册

全局注册的缺陷：

全局注册的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了下载的 JavaScript 无谓的增加。

在这些情况下，可以通过一个普通的 JavaScript 对象来定义组件：

这些 JavaScript 对象，和在模块中 export default 出的对象一样的。

var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }复制代码

new Vue({  el: '#app'  components: {    'component-a': ComponentA,    'component-b': ComponentB  }})复制代码

局部注册的组件，在其它同时注册的局部组件中不可用！

即ComponentB在ComponentA中是不可用的。

这样就可以实现了：

var ComponentB = {  components: {    'component-a': ComponentA  },  // ...}复制代码

这是一般情况下写的，都是通过 Babel 和 webpack 使用 ES6 模块

在某组件中，局部注册 ComponentA

import ComponentA from './ComponentA.vue'export default {  components: {    ComponentA  },  // ...}复制代码

5，模块系统

5.1，在模块系统中，局部注册

这就是一般在项目中得main.js文件：

import Vue from 'vue'import App from './App'import router from './router'/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
    '})复制代码

components属性，其属性值是一个对象。这样的书写方式，就代表注册局部组件

template，表示要使用的模板，可以使用引入的，也可以直接写html标签。

5.2，基础组件的自动化全局注册

这里主要想说的是，引入图片的方法。关于webpack的require.context()

-- 待续