vue之组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue之组件相关的知识,希望对你有一定的参考价值。

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

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

Vue.component(‘my-component‘, {
template: ‘<div>A custom component!</div>‘
})
// 创建根实例
new Vue({
el: ‘#example‘
})
组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前注册了组件:
全局注册
// 注册
Vue.component(my-component, {
  template: <div>A custom component!</div>
})
// 创建根实例
new Vue({
  el: #example
})

局部注册

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

 

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

 

DOM模板解析说明

当使用 DOM 作为模板时 (例如,将 el 选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素 <ul><ol><table><select> 限制了能被它包裹的元素,而一些像 <option> 这样的元素只能出现在某些其它元素内部。

 

以上是关于vue之组件的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0学习笔记之组件

vue中的组件

vscode代码片段生成vue模板

vue3中的fragment(片段)组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

vscode之快速生成vue模板