vue的组件构造器的使用

我个人的理解就是直接代码复用，比如是common.js 一个意思都是代码复用

<div id="app">
	
    <my-cpn></my-cpn>

</div>
<script>
//组件构造器
    const cpnC = Vue.extend({
        template:`
            <div >
            <h2>您的爱好是:</h2>
            <h2>您的爱好是:</h2>
            <h2>您的爱好是:</h2>

            </div>
                `
    })
	//注册全局组件 ，私有化只要写进某个vue实例就可以了
    Vue.component('my-cpn',cpnC)

    const app = new Vue({
        el: '#app',
        data: {
            hobbies:'Nihao ',
        },
    
        components:{
        //cpn-->是使用组件的标签名字 cpnC-->是指向某个组件构造器
			my-cpn:cpnC
		}
    })
</script>

注册组件是可以使用语法糖的，其实也和调用是一样的，类似于这种

var  a = 0;
var  b = 1;
function doCheck(a,b);
function doCheck(a,1);

上代码

<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>
<script>


    Vue.component('cpn1',{
        template:`
            <div >
            <h2>您的爱好是:1111</h2>

            </div>
                `})

    const app = new Vue({
        el: '#app',
        data: {
            hobbies:'Nihao ',
        },
        components:{
            cpn2 : {
                template:`
            <div >
            <h2>您的爱好是:222222</h2>

            </div>
                `}
        }
    })
</script>