Vue中组件的分类

## Vue中组件的分类：全局组件 局部组件
全局组件注册： Vue.component(‘组件名’,{template:’’})
局部组件注册： components(组件名,{template:""})
加粗样式

 <div id='app'>
      <!-- 调用全局组件 -->
        <hello></hello>
    </div>

    <div id='app2'>
      <hello></hello>
    </div>

1-1在script中的操作

// 在Vue实例 中有很多的配置项，都可以在组件中使用了

 // console.log(Vue.prototype)
// console.log(Vue.extend())//返回来的是一个Vue的组件（VueComponent） Vue 的子类
// console.log(Vue.extend().prototype)

// 1 全局创建组件 Vue.extend()

const key=Vue.extend({
  template:`<h1>hello word</h1>`,
})

// 2 全局注册组件

Vue.component('hello',key)

 var vm =new Vue({
    el:'#app',//挂载点
    data:{//数据

    },
    methods:{//方法

    },
    computed:{},//计算属性
    watch:{},//观察

  })

  var vm=new Vue({
    el:'#app2',

  })

1-2可以利用上变简写的方法
全局组件

<div id='app'> 
  <msg></msg>
</div>

  Vue.component('msg',{
    template:'<div>msg的内容</div>'
  })
var vm=new Vue({
  el:'#app',
})

2-1局部组件
// 局部组件只能在当前的实例中使用，在components中注册
// 1 创建局部组件

const key=Vue.extend({
  template:`<h1>hello word </h1>`
})
    var vm=new Vue({
      el:'#app',
      components: {//局部组件的注册
        hello:key
    }
    })
    // var vm =new Vue({
    //   el:'#app2',
    //   components:{
    //     hello:key
    //   }
    // })
  </script>

2-2局部组件的简写

<div id="app1">
  <ss></ss>
  <sa></sa>
</div>

  new Vue({
    el:'#app1',
    components:{//组件
      ss:{
        template:'<span>span元素</span>'
      },
      sa:{
        template:'<h1>h1元素</h1>'
      }
    }
  })