Vue.js知识总结——组件

组件是vue中的核心概念，几乎所有的应用都是围绕着组件来展开的。在vue的设计中将组件作为基础元素，由它组成了整个应用的布局。这更方便我们重复使用，有了组件，我们可以更高效合理地开发和维护我们的项目。

用一张图片来了解什么是组件：

注册

要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如：

Vue.component('my-component', {
  // 选项
})

组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件：

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
  template: '<div>组件</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

这种封装也适用于其它可注册的 Vue 功能，如指令。

DOM 模版解析说明

当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出现在其它元素内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的**重点内容**is 属性：

<table>
  <tr is="my-row"></tr>
</table>

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

• <script type="text/x-template">
• JavaScript内联模版字符串
• .vue 组件

单文件组件

在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。

• 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复。
• 字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 Webpack 或 Browserify 等构建工具。

这是一个文件名为 Hello.vue 的简单实例：

<template>
    <div class="message">{{ message }}</div>
</template>

<script type="text/javascript">
    export default {
      data () {
        return {
            message: 'Hello World!'
        }
      }
    }
</script>

<style lang="less" scoped>
    .message{
        text-align: center;
        color: red;
    }    
</style>

注意：

• <template>里只允许一个根元素，如：

<template >
  <div>content</div>
</template>

不能写成

<template >
  <div>head</div>
  <div>content</div>
  <div>foot</div>
</template>

• 你可以在每一个语言块中使用任何你想用的预处理器，如 lang=”less”。
• Vue 文件格式可以支持局部 CSS，只要在