vue组件的挂载方式
程序员文章站
2024-03-18 13:40:16
...
vue2.0中组件之间有全局注册的组件，有组件内部注册的组件。这两种组件都可以挂载到任何一个组件上，比如有根组件如下
import Vue from 'vue'
Vue.component('global-component', {
template: '<h2>I\'m a global component </h2>'
})
new Vue({
el: "#app",
components: {
"layout": layout
}
})
上面
上面是我们要实现的流程图
1.根组件挂载全局组件和普通组件
上面注册了一个全局组件，global-component并且初始化了一个vue实例。那么如何在根组件引用global-component?
（1）.挂载全局组件。很简单把global-component放在index.html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue1</title>
</head>
<body>
<div id="app">
<global-component> </global-component>
</div>
</body>
</html>(2).挂载普通组件layout，vue实例加入components属性，并且定义组件layout配置项
let layout = {
template: '<div>我是内部挂载的组件</div>',
}
new Vue({
el: "#app",
//add new attributes
components: {
"layout": layout
}
})
然后修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue1</title>
</head>
<body>
<div id="app">
<layout></layout>
<global-component> </global-component>
</div>
</body>
</html>
2.普通组件挂载全局组件与普通组件
例如，给刚才的layout上挂载一个普通组件child以及全局组件global-component.挂载普通组件，在内部components中注册组件child然后在模板template中引用<child></child>；挂载全局组件直接模板template引用就可以
let layout = {
template: '<div>我是内部挂载的组件<global-component></global-component><child></child></div>',
components: {
'child': {
template: '<span>我是一个普通组件内部的组件</span>'
}
}
}
这样，我们就实现了组件之间的层级嵌套关系。
完整js代码示例如下
import Vue from 'vue'
let layout = {
template: '<div>我是内部挂载的组件<global-component></global-component><child></child></div>',
components: {
'child': {
template: '<span>我是一个普通组件内部的组件</span>'
}
}
}
Vue.component('global-component', {
template: '<h2>I\'m a global component </h2>'
})
new Vue({
el: "#app",
components: {
"layout": layout
}
})