vue的组件化理解

什么是组件化？

一、生活中的组件化思想

复杂问题拆解成小问题，解决小问题，相应的复杂问题也就解决了。在程序中组件化就是将一个页面拆分成一个个小的功能块，每个功能块有属于自己的功能。

二、Vue组件化思想

开发一个个可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。

三、html中注册组件的基本步骤（本地引入vue/cdn引入vue）：

3.1、【Vue2.x之前的写法】

3.1.1.调用Vue.extend()方法创建组件构造器对象

Vue.extend({

　　//template  自定义组件的模板

　　template:`

　　　　// 模板代码

　　`,

　　// 注册局部组件

　　components:{

　　　　注册组件的标签名: 组件构造器

　　}

})

 

3.1.2.调用Vue.component()方法注册全局组件【多个Vue实例中可用】

Vue.component('注册组件的标签名',组件构造器)

 

3.1.3.在Vue实例中使用组件

<注册组件的标签名></注册组件的标签名>

 

3.2、注册组件语法糖形式【Vue2.x的写法】

3.2.1调用Vue.component()方法注册全局组件【多个Vue实例中可用】

Vue.component('注册组件的标签名',{

　　template: `模板代码`,

})

 3.2.2注册局部组件【Vue实例或组件中】

　　components:{

　　　　注册组件的标签名: {

　　　　　　template: `html模板代码`,

　　　　}

　　}

3.2.3.在Vue实例中使用组件

<注册组件的标签名></注册组件的标签名>

 

3.3、组件模板分离写法

3.3.1使用script标签，类型必须是type="text/x-template"，且必须有模板名称（用于关联组件）

<script type="text/x-template" id="模板名">

　　//组件模板

</script>

 

3.3.2使用template标签

<template id="模板名">

　　//html模板

</template>

3.3.3模板分离后组件的写法

全局组件：Vue.component('注册组件的标签名',{

　　template: '#模板名',

})

局部组件：components:{

　　　　注册组件的标签名: {

　　　　　　template: '#模板名',

　　　　}

　　}

 

四、脚手架中组件注册

4.1、在components文件夹下创建组件文件；

 

4.2、使用import导入，在父组件实例的components中局部注册组件，父组件实例中使用。