Vue 组件化的视图库
2018-03-08 本文已影响50人
yibuyisheng
Vue 根组件实例
Vue 是一个基于组件的视图库。在一个页面上,可以形成多颗组件树,每棵树的根组件都会绑定到一个 DOM 元素。
比如页面上有两个 div
:
<div id="app1"></div>
<div id="app2"></div>
就可以针对这两个 DOM 元素实例化两个 Vue 根组件实例:
import Vue, { ComponentOptions } from 'vue';
const App1: ComponentOptions<Vue> = {
el: '#app1',
template: '<div>app1</div>'
};
const App2: ComponentOptions<Vue> = {
el: '#app2',
template: '<div>app2</div>'
};
new Vue(App1);
new Vue(App2);
执行完之后的 DOM 结构为:
<div>app1</div>
<div>app2</div>
有关 ComponentOptions 等详细内容,在后续文章中会逐步讲到,此处只需要知道 App1 和 App2 是两个组件(配置)。
注意:对应 Vue 根组件实例的 DOM 元素之间不能存在父子/祖孙
关系。比如上例中的 #app2
节点不能是 #app1
的子孙节点。
Vue 组件树
有了 Vue 根组件之后,就可以在根组件上挂载无限层级的 Vue 组件了:
<div id="app"></div>
import Vue, { ComponentOptions } from 'vue';
const Child2: ComponentOptions<Vue> = {
template: '<div id="child2">child2</div>'
};
Vue.component('Child2', Child2);
const Child1: ComponentOptions<Vue> = {
template: '<div id="child1">child1 <Child2></Child2></div>'
};
Vue.component('Child1', Child1);
const App2: ComponentOptions<Vue> = {
el: '#app2',
template: '<Child1></Child1>'
};
new Vue(App);
执行完之后的 DOM 结构为:
<div id="child1">child1 <div id="child2">child2</div></div>
其中, Vue.component
用于在 Vue 内部注册组件。
注意:非根组件都不要指定 el
。
页面分块组件化能力的优势
- 视图模块之间绝对分离,互不影响。
- 支持对已有系统的逐步重构。