vue-组件基础

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

1，基本示例

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

<div id="components-demo">
  <button-counter></button-counter>
</div>
复制代码

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
复制代码

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

2，组件的复用

2.1，组件的特性

1. 组件是可任意次数复用的 Vue 实例
2. 组件可以作为自定义元素来使用
   • 每用一次组件，就会有一个它的新实例被创建。
   • 每个组件都会各自独立维护它的 data等实例属性

2.2，data是函数

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

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

3，组件的组织

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

4，组件注册类型

4.1，全局注册

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

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

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
复制代码

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>
复制代码

2. 任何新创建的 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: '<App/>'
})
复制代码

• 所以，所有的后代模板都可以使用全局注册的组件。
• 所以，全局注册的组件，在各自的内部，也可以互相使用

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: '<App/>'
})
复制代码

• components属性，其属性值是一个对象。这样的书写方式，就代表注册局部组件
• template，表示要使用的模板，可以使用引入的，也可以直接写html标签。

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

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

-- 待续

转载于:https://juejin.im/post/5b8685d9e51d4538db34c7fd