Vue - 组件（Component）

一、什么是组件（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 规则 (小写，并且包含一个短杠)，尽管这被认为是最佳实践。

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

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

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

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

这样的顺序是对的，而

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

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

这样是错的。

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

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

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

渲染为：


  A custom component!

2.局部注册

不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：

var Child = {
  template: 'A custom component!'
}

var vm = new Vue({
  el: '#box',
  components: {
    'my-component': Child
  }
})

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

Vue组件的全局注册，可以在多个Vue实例中使用，如果是在Vue构造器中局部注册，那么只能在此Vue实例中使用。

那么在

下面的将不会渲染出来。

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

3.DOM模板解析注意事项

当使用 DOM 作为模板的时候（例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上），你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析，规范化之后才能获取其内容。尤其要注意，像

，
...

  

 
 自定义组件  会被当成无效的内容，因此会导致错误的渲染结果。变通方式是使用特殊的 is 特性： 
 
  

 
 应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：

Vue - 组件（Component）

你可能感兴趣的:(Vue - 组件（Component）)