vue.js 组件

什么是组件

---

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

使用组件

---

# 注册

我们可以通过以下方式创建一个 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!
'
    })
    // 创建根实例
    new Vue({
      el: '#example'
    })

渲染为：

    

      
A custom component!
    

# 局部注册

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

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

    new Vue({
      // ...
      components: {
        //  将只在父模板可用
        'my-component': Child
      }
    })

# DOM模板解析说明

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

，
， ， 限制了能被它包裹的元素， 只能出现在其它元素内部。

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

...

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

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