Vue组件化

Vue组件开发

所谓组件化，就是把单个页面拆分成多个组件，每个组件依赖的 CSS、JS、template、等资源放在一起开发和维护

Vue在组件中给了两种组件形式 全局组件 与 局部组件

全局组件

HTML部分：

JS部分：

Vue.component("Top",{
  template:`
这是{{msg}}
`,
  data:function(){
    return{
      msg:"顶部"
    }
  }
})
  new Vue({
    el:"#app",
  })

显示效果：

这是顶部

全局注册语法：Vue.component（"组件名"，定义组件）
定义组件是一个对象有该组件自己的template、data、mothods等等

注意：
1、组件的data属性是一个函数return的一个对象
2、Vue.componentd（注册组件）一定要在所有new Vue（）创建实例前
3、如果单独定义组件要在注册组件之前 先要定义了才可以注册

可以单独定义组件
如下

局部组件

HTML部分：

JS部分：

let Top={
  template:`
这是{{msg}}
`,
  data:function(){
    return{
      msg:"顶部"
    }
  }
}

Vue.component("Top",Top)

let Bottom={
  template:`
这是{{msg}}
`,
  data:function(){
    return{
      msg:"底部"
    }
  }
}
  new Vue({
    el:"#app",
    components:{//注册局部组件
      // "Bottom":Bottom 可简写为Bottom
      Bottom
    }
  })

显示效果：

这是顶部
这是底部

全局组件与局部组件的区别

局部组件只能在他所在的new Vue（）的实例作用域使用
如bottom就只能在#app中使用 全局组件可以在任何vue 实例作用域中使用
注意 注册组件 Vue.component() 一定要在所有new Vue（）之前

组件引用外部模板（两种）

使用外部模板的好处 可以提高复用性

第一种：
HTML部分：

JS部分：

//定义组件
let Outside = {
  template:"#outside",//选择外部模板
  data:function(){
    return{
      msg3:"外部"
    }
  }
}
//全局注册组件
Vue.component("Outside",Outside)


let Top={
  template:`
这是{{msg}}
`,
  data:function(){
    return{
      msg:"顶部"
    }
  }
}

Vue.component("Top",Top)

let Bottom={
  template:`
这是{{msg}}
`,
  data:function(){
    return{
      msg:"底部"
    }
  }
}
  new Vue({
    el:"#app",
    components:{//注册组件
      // "Bottom":Bottom 可简写为Bottom
      Bottom
    }
  })

显示效果：

这是顶部
这是外部模板
这是底部

这里我把外部组件以全局的方式注册了组件 当然也可以用局部的方式来注册组件

第二种：
将第一种HTML中的

变更为

其余不变也能达到同样的目的

显示效果：

这是顶部
这是外部模板
这是底部