Vue - 组件（Component）

https://www.jianshu.com/p/f5eb996f5e2a

一、什么是组件（Component）？

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

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

二、使用组件

1.全局组件

我们知道，创建一个Vue实例可以：

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

全局注册组件，可以使用Vue.component(tagName, options)。 比如：

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

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

组件在注册之后，便可以作为自定义元素：<my-component></my-component>使用了。
注意确保在初始化根实例之前注册组件：

在初始化根实例之前注册组件这句话就是指的是：

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

var vm = new Vue({
  el: '#box'
})

这样的顺序是对的，而

var vm = new Vue({
  el: '#box'
})

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

这样是错的。

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

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

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

我们要注意，一般选项中需要添加template，就是HTML的构造。

渲染为：

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

作者：廖马儿
链接：https://www.jianshu.com/p/f5eb996f5e2a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。