具体代码如下所示：

document

var aaa=vue.extend({//继承出来一个vue类aaa

template:'

我是标题3

'

});

var a=new aaa();//a跟vm一样

console.log(a);

var vm=new vue({

el:'#box',

data:{

bsign:true

}

});

document

var aaa=vue.extend({

template:'

我是标题3

'

});

vue.component('aaa',aaa);//aaa是组建实例，全局组件

var vm=new vue({

el:'#box',

data:{

bsign:true

}

});

document

var aaa=vue.extend({

data(){

return {

msg:'我是标题^^'

};

},

template:'

{{msg}}

'

});

vue.component('aaa',aaa);

var vm=new vue({

el:'#box',

data:{

bsign:true

}

});

document

var aaa=vue.extend({

data(){

return {

msg:'我是标题^^'

};

},

methods:{

change(){

this.msg='changed'

}

},

template:'

{{msg}}

'

});

vue.component('aaa',aaa);

var vm=new vue({

el:'#box',

data:{

bsign:true

}

});

document

var aaa=vue.extend({

template:'

{{msg}}

',

data(){// es6语法，函数不写：，组件里面放数据: data必须是函数的形式，函数必须返回一个对象(json)

return {

msg:'ddddd'

}

}

});

var vm=new vue({

el:'#box',

data:{

bsign:true

},

components:{ //局部组件，放到某个组件内部，vue.component('aaa',aaa);

aaa:aaa

}

});

document

var aaa=vue.extend({

template:'

{{msg}}

',

data(){

return {

msg:'ddddd'

}

}

});

var vm=new vue({

el:'#box',

data:{

bsign:true

},

components:{ //局部组件

'my-aaa':aaa

}

});

document

vue.component('my-aaa',{//全局，公共的提出去

template:'好'

});

var vm=new vue({

el:'#box'

});

document

var vm=new vue({

el:'#box',

components:{ //局部

'my-aaa':{

data(){

return {

msg:'welcome vue'

}

},

methods:{

change(){

this.msg='changed';

}

},

template:'

标题2->{{msg}}

'

}

}

});

document

标题1

• {{val}}

var vm=new vue({

el:'#box',

components:{

'my-aaa':{

data(){

return {

msg:'welcome vue',

arr:['apple','banana','orange']

}

},

methods:{

change(){

this.msg='changed';

}

},

template:'#aaa'

}

}

});

document

标题2->{{msg}}

• 1111
• 222
• 3333
• 1111

var vm=new vue({

el:'#box',

components:{

'my-aaa':{

data(){

return {

msg:'welcome vue'

}

},

methods:{

change(){

this.msg='changed';

}

},

template:'#aaa'

}

}

});

动态组件

var vm=new vue({

el:'#box',

data:{

a:'aaa'

},

components:{

'aaa':{

template:'

我是aaa组件

'

},

'bbb':{

template:'

我是bbb组件

'

}

}

});

下面看下vue component动态组件

动态组件

通过component标签 的is属性来进行组件的切换

is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化

总结

以上所述是小编给大家介绍的vue19 组建 vue.extend component、组件模版、动态组件 的实例代码，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！