Vue 从入门到进阶

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

页面分块组件化能力的优势

上一篇下一篇

猜你喜欢

热点阅读