对于在vue中为什么可以通过import导入一个组件理解

对于在vue中为什么可以通过import导入一个组件理解

1.通过引入vue.js文件的方式注册组件

1.1全局注册

在vue中全局注册组件是通过Vue.component(name,{})的方式注册一个全局的vue组件，通过这种方式注册的组件其他的vue实例也同样的可以使用

 Vue.component("hi",{
     template:`
                <div class='box'>hi</div>
            `,
     data(){
         return {}
     },
     生命周期钩子
     数据监听
     计算属性
     ....
 })

每个组件就是一个vm实例，因此也同样的具备其所有的方法

1.2 局部注册

注册局部组件的方法是在当前的vm实例中添加components配置项的方式创建的组件，这样创建的组件只供当前实例使用，其他实例无法使用

let vm=new Vue({
    el:"#root",
    data:{},
    // 局部注册：只有当前Vue实例可以使用
    components:{
        hello:{
            template:"<div class='box'><h3>hello 题目</h3><p>hello 内容</p></div>",
            data(){
                return {}
            }
        }
    }
})

不论是局部注册的组件或者全局注册的组件都有一下共同特点

1. 对于组件的描述都是通过一个对象的形式进行的
2. data都是一个函数，并且返回一个对象
3. 在组件内部注册的子组件只供自己使用，其他组件无法使用

书写的变形

通过对于组件的描述都是通过一个对象的形式进行的可以知到参数是一个对象，那么就可以将这个对象进行一个提取

// 2.组件都是json,只是注册的方式不同，全局注册就是全局组件，局部注册，就是局部组件
let vSecond = {
    template: "#second",
    data(){
        return {}
    },
    methods:{},
    watch:{},
    mounted(){}
}
let vFirst = {
    template: "#first",
    components: {
        vSecond
    }
}
let vHello = {
    template: "#hello"
}

Vue.component("vHello", vHello)
let vm = new Vue({
    el: "#root",
    // 1.加上了template，页面 div#root 什么都不用写了
    template: "<v-first></v-first>",
    data: {},
    // 局部组件：只有当前Vue实例才可以调用这个组件
    components: {
        vFirst
    }
})

通过这样的变形，那么就可以在任何的组件内重复的利用每个组件的配置对象来进行组件的注册，达到组件的真正的复用，之前的方式虽然也可以重复的使用，但是只能在其父组件内部使用，如果其他组件也是需要，那么则需要重新在复制/书写一遍，比较麻烦而且代码冗余较大。

在vue脚手架/vue文件中组件复用

在每个vue文件肯定会有一段这样的代码

export default {
  name: "MoveInfo",
  data() {
    return {
        
    };
  },
}

这样的方式实际上暴露的就是一个组件的配置对象，然后通过在其他需要这个组件的地方只需要通过引入的方式就可以得到这个配置对象

import vMoveInfo from "./moveInfo"
console.log(vMoveInfo);// 得到的结果正是一个object对象

然后通过局部注册组件的方式进行注册

export default {
    name: 'Middle',
    data() {
        return {};
    },
    /********************/
    components:{vMoveInfo},
    /********************/
    mounted() {
        
    },
}

这样就达到了组件的复用，并且也解决了自己内部的子组件其他组件不能使用的问题，真正达到组件的重复利用，降低代码冗余，并且整个项目的模块化更加的规范。