Vue.js组件化开发详解-CSDN博客

模块化(组件化)开发

按照功能(或按照复用性)把一个页面拆成各个板块(模块),每一个模块都是一个单独的文件(单独的组件)，最后把各个模块(组件)拼在一起即可！！

目的 :方便团队协作开发实现复用

组件分类

功能型组件「UI组件库中提供的一般都是功能型组件:element/iview/antdv/vant/cube..」

+ 一般UI组件库提供的功能组件就够用了
+ 偶尔UI组件库中不存在的，才需要自己封装「难点」
+ 我们经常会把功能型组件进行二次封装（结合自己项目的业务逻辑）「特殊亮点」

业务型组件

+ 通用业务型组件「好多页面都需要用到的，我们把其封装成为公共的组件」
+ 普通组件

以后开发项目，拿到设计稿的第一件事情：划分组件「按照功能版块划分、本着复用性原则,拆的越细越好(这样才能更好的实现复用)」

组件的创建及使用

创建一个 Xxx.vue 就是创建一个vue组件{局部组件、私有组件}，组件中包含：结构、样式、功能

结构：基于template构建

+ 只能有一个根元素节点(vue2)
+ vue的视图就是基于template语法构建的(各种指令&小胡子...)，最后vue会把其编译为真实的DOM插入到页面指定的容器中
首先基于 vue-template-compiler 插件把template语法编译为虚拟DOM「vnode」
其次把本次编译出来的vnode和上一次的进行对比，计算出差异化的部分「DOM-DIFF」
最后把差异化的部分变为真实的DOM放在页面中渲染

样式：基于style来处理

+ lang="less" 指定使用的CSS预编译语言「需要提前安装对应的loader」
+ scoped 指定当前编写的样式是私有的，只对当前组件中的结构生效，后期组件合并在一起，保证样式之间不冲突

功能：通过script处理

+ 导出的这个对象是VueComponent类的实例（也是Vue的实例）：对象 -> VueComponent.prototype -> Vue.prototype
+ 在对象中基于各种 options api 「例如：data、methods、computed、watch、filters、生命周期函数...」实现当前组件的功能
+ 在组件中的data不再是一个对象，而是一个“闭包”
+ 各个组件最后会合并在一起渲染，为了保证组件中指定的响应式数据是“私有的”，组件之间数据即使名字相同，也不会相互污染...所以需要基于闭包来管理

注意;App.vue页面入口相当于首页,写好的组件都导入到这个里面

<template>
  <div class="box">
    {
  
  { msg }}
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      //编写响应式数据
      msg: "你好,世界",
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  font-size: 20px;
  color: red;
}
</style>

私有组件(使用的时候首先进行导入,然后注册,这样视图中就可以调用组件进行渲染了)

需要使用私有组件的时候，需要先导入import Test from "./Test.vue";
然后注册:这样就可以调用组件进行渲染了

<template>
  <div id="app">
      //3.使用组件：可以使用单闭合或双闭合
      
    <Test></Test>
      <Test>
  </div>
</template>


<script>
//1、导入组件
import Test from "./Test.vue";
export default {
  name: "App",
  components:{
    //2、注册使用的组件
    Test,
  }
};
</script>

创建全局组件

1. 创建一个局部组件

<template>
  <div>{
  
  { msg }}</div>
</template>

<script>
export default {
  name: "Vote",
  data() {
    return {
      msg: "今夜阳光明媚",
    };
  },
};
</script>

@2 在main.js入口中，导入局部组件Vote，把其注册为全局组件

import Vote from './Vote.vue';
Vue.component('Vote', Vote)

@3 这样在任何组件(视图中)，无需基于components注册，直接可以在视图中调用

插槽

调用组件的方式

调用组件的时候，可以使用：

双闭合 <Test></Test>

双闭合的方式可以使用插槽slot

@1 在封装的组件中，基于 <slot> 标签预留位置
@2 调用组件的时候，

Vue 组件化开发

模块化(组件化)开发

组件分类

插槽