组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。就像是python中封装一个类,在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
1 全局组件的使用
<body>
<div id="app">
<zj_all></zj_all>
</div>
<script>
Vue.component(
'zj_all',
{
template: '<div>全局组件定义</div>'
}
)
Vue.component()方法中参数说明
第一个参数指定组件名 第二参数以 {} 形式传递,在里面指定组件的属性,template指定组件的要加载的内容
2 局部组件的使用
<body>
<div id="app">
<zj_all></zj_all>
<div>123<div>456</div></div>
</div>
<script>
var zj_a = {
template: '<div>局部组件定义</div>'
}
Vue.component(
'zj_all',
{
template: '<div>全局组件定义 <zj_a></zj_a></div>',
// 注册局部组件
components:{
zj_a
}
}
)