Vue.js知识总结——组件

组件是vue中的核心概念,几乎所有的应用都是围绕着组件来展开的。在vue的设计中将组件作为基础元素,由它组成了整个应用的布局。这更方便我们重复使用,有了组件,我们可以更高效合理地开发和维护我们的项目。

用一张图片来了解什么是组件:
Vue.js知识总结——组件_第1张图片

注册

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

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

组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用。要确保在初始化根实例 之前 注册了组件:

<div id="example">
  
div>
// 注册
Vue.component('my-component', {
  template: '
组件
'
}) // 创建根实例 new Vue({ el: '#example' })

局部注册

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

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

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

DOM 模版解析说明

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

      ...

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

      <table>
        <tr is="my-row">tr>
      table>

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

你可能感兴趣的:(vue)