Vue.extend组件的注册

Vue.js的组件注册

为什么会有组件注册呢

1.vue.js文件中暴露出一个Vue的构造器函数， 这个函数的作用，是用来实例化出来一个实例， 那么这个实例也是一个组件， 我们称之为 ‘根实例’

2.我们从vue detools（Vue谷歌调试工具）中我们发现这个实例的表现形式是一个标签

2.有时出于需求，我们需要拓展一些方法，又不想写在根实例中，所以Vue.js就给出了一个解决方案，给出了一个方法，这个方法叫做extend；

4.通过对比我们发现 Vue和Vue.extend的输出结果及其相似；但是这两个两个东西的使用方法并不一样；Vue可以new实例化，但是Vue.extend不可以

5.通过对比我们发现，Vue和Vue.extend都有一个options的配置项

6.最终我们知道Vue.extend是通过原型继承自Vue的，所以Vue的所有配置项Vue.js也都有，都能写。

7.当我们去new Vue.extend()的时候发现他会报错，他告诉我们Vue.extend应该写成标签形式

8.然后当我们将Vue.extend的配置项直接写入html中时还是报错了，因为他不符合html的语法，他会直接把他当成标签来解析，但是又没有这个标签

9.就像结婚要去民政局领证一样，只有领证了才能得到国家的认可，Vue.extend也只有得到了html的认可才能在html中正确的解析出来

10.所以这时候就需要组件的注册了

什么是组件

• 想要了解什么是组件，就要先了解什么是 组件化思维
  组件化针对的是页面中的整个完整的功能模块划分 （项目的分工）
• 组件的概念（ 一个文件 ）
  组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体，new Vue({})我们称之为根实例，Vue.extend我们称之为组件
  优点：代码复用，便于维护
  划分组件的原则：复用率高的，独立性强的

Vue.js的组件注册分为两种，一种是全局注册，一种是局部注册

两种注册方式又分为以前的写法，和现在vue.js2.0之后新出的简写的写法

<div id="app">
    <Hi></Hi>
</div>

<div id="app2">
    <Hi></Hi>
</div>

<script>
                            // 全局注册
              // 老牌写法
    var Hi=Vue.extend({
         template:'<div>这里是老牌的全局组件注册</div>'
    })
    Vue.component('Hi',Hi)
    
    new Vue({
        el:'#app'
    })
    
                    // 现在的简写
    Vue.component('Hi',{
        template:'<div>这里是简写的全局组件注册</div>',
        // 后面可以接new Vue中的各种配置项
        methods:{},
        comuted:{},
        match:{}
    })
    new Vue({
        el:'#app'
    })
    
                            //局部注册
            //老牌写法
    var Hi=Vue.extend({
        template:'<div>这里是老牌的局部组件注册</div>'
    })
    let vm = new Vue({
        el:'#app',
        components:{//局部注册一定要记得带 's' 是components;不是compponent
             'Hi':Hi//key是组件名，值是外面定义的实例名称
        }
    })
    
    // 现在简写的写法
    new Vue({
        el:'#app',
        components:{
            'Hi':{
                 template:'<div>这里是简写的局部组件注册</div>'
            }
        }
    })
    
    //这个是为了验证局部注册和局部注册的区别的
    new Vue({
        el:'#app2'
    })
    
    
    //这两个输出的都是构造器函数，参数都是一个options，Vue.extend()是通过原型继承自Vue的，所以这两个构造函数的配置项相同，new Vue中能写的Vue.extend中都能写
    // console.log(Vue)
    // console.log('-----------------------')
    // console.log(Vue.extend())
    // console.log('-----------------------')
<script>