什么是组件？

组件（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!

A custom component!

局部注册

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

var Child = {
  template: '
A custom component!
'
}
new Vue({
  // ...
  components: {
    //  将只在父模板可用
    'my-component': Child
  }
})

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

DOM 模版解析说明

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

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

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

...

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

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

• Vue.component('hello-world', {
    template: '#hello-world-template'
  })

  这在有很多模版或者小的应用中有用，否则应该避免使用，因为它将模版和组件的其他定义隔离了。
  

  使用 v-once 的低级静态组件(Cheap Static Component)

  尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once将渲染结果缓存起来，就像这样：

  Vue.component('terms-of-service', {
    template: '\
      
  \
        
  Terms of Service
  \
        ... a lot of static content ...\
      
  \
    '
  })

  分享文章：创新互联VUE2教程：Vue.js2.0组件
  文章起源：http://www.csdahua.cn/qtweb/news5/317505.html

  网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

  广告

  声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网