全局组件定义
<!--全局-->
<div class="app">
<my-object></my-object>
<my-object></my-object>
</div>
<div class="app2">
<my-object></my-object>
<my-object></my-object>
</div>
//注册全局组件
Vue.component('my-object',{
template:'<div>{{msg}}<input type="button" value="弹出" @click="tanchu"/></div>',
data:function(){
return {
msg:'这是全局的组件'
}
},
methods:{
tanchu:function(){
alert(this.msg);
}
}
});
//全局调用
var vm=new Vue({el:'.app'});
var vm2=new Vue({el:'.app2'});
局部组件定义
<!--局部-->
<div class="app3">
<my-app3></my-app3>
<my-app4></my-app4>
</div>
//局部调用
var my_app3={
template:'<div>{{msg}}<input type="button" value="弹出局部组件3" @click="tanchu"/></div>',
data:function(){
return {
msg:'弹出局部组件3'
}
},
methods:{
tanchu:function(){
alert(this.msg);
}
}
}
var my_app4={
template:'<div>{{msg}}<input type="button" value="弹出局部组件4" @click="tanchu"/></div>',
data:function(){
return {
msg:'弹出局部组件4'
}
},
methods:{
tanchu:function(){
alert(this.msg);
}
}
}
var vm3=new Vue({
el:'.app3',
components:{//局部调用组件
'my-app3':my_app3,
'my-app4':my_app4,
}
});
解析 DOM 模板
有些 HTML 元素,诸如 <ul>、<ol>、<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li>、<tr> 和 <option>,只能出现在其它某些特定的元素内部。
<div class="app4">
<table>
<tr is="blog-post-row"></tr>
</table>
</div>
var componentTr={
template:'#blog-tpl',
data:function(){
return{
msg:'我是组件'
}
}
}
var vm4=new Vue({
el:'.app4',
components:{
'blog-post-row':componentTr
}
});