vue中组件的封装，组件间的传值

组件

把某个界面或者说某个小功能，封装起来就叫组件（就是对html css js的一个综合封装），组件也是Vue的实例，所以它也有自己的data和methods以及生命周期钩子等

组件开发特点：可复用，同时会简化代码结构，易于维护，同时利于多人协同开发等。

$nextTick

setTimeout高级版本 离它最近的一个dom刷新

单文件组件

template html 唯一的元素包住

js

css 导入 @import url(路径)

组件中引入其它组件

组件的使用三步

1：导入组件

import 自定义的一个组件名 from “组件路径”;

注意点，这里组件路径就算是当前同一目录也最好加上"./组件名"，不然会报错

2：注册组件

组件的使用是需要注册的，注册方式为：

export default {
   
  components: {
   
    组件名,     //注册的组件都写在components对象下。
  }
}

3：使用组件(写到相应html位置即可)

<组件名></组件名>   //该组件名来自于在组件注册时的组件名
<template>
  <div class="main">
    <!-- 使用组件  -->
    <!-- 在这index.vue是父组件，top，middle，bottom是子组件 -->
    <!-- top与middle是兄弟组件 -->
    <top></top>
    <middle></middle>
    <bottom></bottom>
  </div>
</template>
<script>
// 导入组件  这里面top,middle,bottom是需要另外创建的vue组件，这里是没创建的
import top from "./top.vue";
import middle from "./middle.vue";
import bottom from "./bottom.vue";
​
export default {
   
  // 组件注册
  components: {
   
    top, //