Vue2中，组件与实例的关系（相当于类class和实例的关系，原理一样！）

àì夳堔傛蜴生んèń 2021-09-17 16:20 264阅读 0赞

### **第一步：如何创建组件（原生方法）：** ###

//Vue.extend是继承的意思，继承这个对象创建一个新的组件（相当于一个类）
    let my_component =Vue.extend({
            template:'<p><span>{
       {test_data}} </span></p>',
            data:function() {
                return {
                    test_data:"这是一个组件，相当于一个类",
                }
            }
        })
    
    
    //当然在全局Vue.component或局部components注册组件名时,Vue.extend()可以省略！
    Vue.component("name",{});

### **第二步：组件相当于一个类，必须实例化且挂在在Vue实例中才可以使用（实例化的三种方法）** ###

//组件实例化的三种方式:
    //第一种：new一个组件实例，然后通过实例的vm.$mount方法手动挂在到.container 元素对象中去！
    new my_component().$mount(".container");
    
    //第二种：先注册一个全局组件，然后把<my-kirin-global></my-kirin-global>元素放在.container实例下面;
    //全局组件可以挂在在任何一个实例下面，而局部组件只能挂在在当下实例中！
    //切记：每一个组件无法单独使用，必须挂在在Vue实例对象内部！
    Vue.component("my-kirin-global", my_component);
    
    //第三种，先注册一个局部组件，然后把<my-kirin-local></my-kirin-local>元素必须放在.container实例下面;
    const app =  new Vue({
            el:".container",
            components:{
                "my-kirin-local":my_component,
            }
        });
    
    });