组件
把某个界面或者说某个小功能,封装起来就叫组件(就是对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, //