本文详细介绍了Vue.js中全局组件和局部组件的创建方式，包括使用Vue.extend和Vue.component，以及如何在模板中嵌套和引用组件。通过实例演示了如何为组件命名和传递数据，适合初学者理解组件化开发。
1.全局组件
方式一
var Com=Vue.extend({
//必须有一个根节点
template:'<div><h1>..</h1><p>xxx</p></div>'
})
//组件命名规范（不用驼峰命名）
Vue.component('hello',Com);
方式二
Vue.component('hello-world',{
template:'<div></div>'
})
2.局部组件
new Vue({
el:'#XX',
data:{
},
components:{
//方式一
'Com':{
template:'<div></div>'
},
//方式二
'Com1':{
template:"#Com1",
data:function(){
return{
title:"title"
}
}
}
}
})
<template id="Com1">
<div>
<p>{{title}}</P>
</div>
</template>
<body>
<hello></hello>
<hello-world></hello-world>
<Com></Com>
<Com1></Com1>
</body>
2230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
