注意:在
全局/局部
组件中如果含有data属性,那么它必须是一个返回Object的函数
!!
1、注册全局组件
<div id="example">
<!--注意这里给组件传递prop的时候必须用中划线分割-->
<my-component my-message='你好啊'></my-component>
</div>
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>',
//注意:这里虽然用的驼峰原则,但是会被解析成中划线原则(:my-message),
//所以在给这个组件传递props的时候 需要这样写:my-message='你好啊';
props : ['myMessage'],
data : function(p){
return { p : p++ };
}
})
// 创建vue实例
new Vue({
el: '#example'
})
2、局部组件
局部组件只在另一个实例/组件的作用域内存在。
//局部组件
var Child = {
template: '<div>A custom component!</div>',
data : function(p){
return { p : p++};
}
}
new Vue({
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})