vue组件（一）——组件介绍

定义

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

全局组件

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

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

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

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

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

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

案例1

渲染为：

  
我是全局组件！

局部组件

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

var Child = {
template: '
我是局部组件！
'
}new Vue({ // ... components: { //  将只在父组件模板中可用 'my-component': Child }})

案例2

DOM 模板解析注意事项

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

、
、、 这样的元素里允许包含的元素有限制，而另一些像  这样的元素只能出现在某些特定元素的内部。

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

...

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

• 
  但是用is特殊属性可以：
  

或者temp模板标签也可以：

或者内联模板字符串也行

data必须是函数

构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。实际上，如果你这么做：

Vue.component('my-component', {
  template: '{{ message }}',
  data: {
    message: 'hello'
  }
})

那么 Vue 会停止运行，并在控制台发出警告，告诉你在组件实例中  data  必须是一个函数。但理解这种规则为何存在也是很有益处的，

所以让我们先作个弊：

由于这三个组件实例共享了同一个  data  对象，因此递增一个 counter 会影响所有组件！这就错了。我们可以通过为每个组件返回全新的数据对象来修复这个问题：

data: function () {
  return {
    counter: 0
  }
}