Vue - Component组件

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

任意的网页都可以切割成组件，可以迅速建立。

图片.png

使用组件

1.全局注册

我们知道，可以通过以下方式创建一个 Vue 实例：

new Vue({
  el: '#some-element',
  // 选项
})

那么要注册一个全局组件，可以使用 Vue.component(tagName, options)：

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

注意：对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。

组件在注册之后，便可以作为自定义元素：

<my-component></my-component>

在一个模板中使用。请注意确保在初始化根实例之前注册组件。（上面就是注册组件的方式）

HTML:

<div id="example">
  <my-component></my-component>
</div>

JS:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 创建根实例
new Vue({
  el: '#example'
})

将会渲染为：

<div id="example">
  <div>A custom component!</div>
</div>

eg:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
}) // 注册:component

var example = new Vue({
  el:"#example",

})  // 实例化Vue

---

组件中，每个组件都有它对应的模板。

组件的操作：

1）定义组件。 
2）注册组件。

1）定义组件：
Vue.extend() # Vue继承创建组件。

var app_nav = Vue.extend({
  template: '<div>app_nav</div>'
})

注意：定义组件的时候，的template必须是最根部的tag，不能是多个。

template: '<div>123</div><div>456</div>'

这样的就是错误的。

2）注册组件

Vue.component('app-nav', app_nav)
Vue.component('app-view', app_view)

组件等价：app-nav -> app_nav -> template( 也就是：<div>app_nav</div> )

---

Vue的组件，非常类似于自定义元素。它是Web组件规范的一部分。实际上Vue.js的组件语法参考了该规范。

Vue组件实现了Slot API 与 is 特性。但是，有几个关键的不同：

Web组件规范仍然远没有完成，并且没有浏览器实现。
相比之下，Vue.js组件不需要任何补丁，并且在所支持的浏览器（IE9 以及更高版本）之下表现一致。
必要的时候，Vue.js组件也可以放在原生自定义元素之内。

Vue.js组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义时间系统，以及动态的，带有特效的组件替换。

组件系统是使用Vue.js构建大型应用的基础。另外，Vue.js生态系统也提供了高级工具与多种支持库，它们和Vue.js一起构成了一个更加『框架』性的系统。