组件化的思想 将一个页面中的处理逻辑放在一起，处理起来就会很复杂，不利于后续管理和扩展。

如果将页面拆分成一个个小的功能块，每个功能块实现自己的内容，之后对页面的管理和维护就变得很容易了。

注册组件的基本步骤

1.创建组件构造器
2.注册组件
3.使用组件

//创建组件构造器对象
const cpnC = Vue.extend({
      template:`hello worldhi world`
})

//注册组件
Vue.component('my-cpn',cpnC)
    
//使用组件

全局组件

可以在多个Vue的实例下使用
Vue.component('my-cpn',cpnC)

局部组件

仅可以在当前Vue实例下使用

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        mycpn: cpnC
      }
    });

父子组件

我是标题我是内容，哈哈`
    })

    const cpnC2 = Vue.extend({
      template:`我是标题2我是内容2，呵呵呵`,
      components:{
        cpn1:cpnC1
      }
    })
    
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        cpn2: cpnC2
      }
    });" _ue_custom_node_="true">

组件与组件之间存在层级关系 注册全局组件 语法糖

Vue.component('cpn1',{
      template:`我是标题我是内容，呵呵呵`
    })

注册局部组件 语法糖

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        'cpn2' :{
          template:`我是标题2我是内容2，呵呵呵`
        }
      }
    });

省去了调用extend的步骤 组件模板抽离 1.通过script标签， type="text/x-template"

哈哈哈哈哈歪比歪比" _ue_custom_node_="true">

1.通过template标签

哈哈哈哈哈歪比歪比

组件可以访问Vue实例的数据吗？

不能，而且即使可以访问，如果将所有数据都放在Vue实例中，Vue实例会变得非常臃肿

Vue组件应该有自己保存数据的地方

{{title}}歪比歪比

data(){}

为什么组件中data必须是函数 组件是一个封闭的空间，每一个组件实例都有自己的状态