VUE封装组件

vue如何封装一个公共组件来供程序反复调用呢？可按如下步骤进行：

1、定义一个vue文件。 

如下：

<template>
  <div class="calPane">
   <div class="calendars" style="height: 50%;width: 100%;">
      <slot name="calendar"></slot>
    </div>
    <div class="lunar" style="height: 50%;width: 100%;">
      <slot name="lunar"></slot>
    </div>
  </div>
</template>

<script setup src="SchedulePane.js">

</script>

说明：该文件中声明了下class=“calPane”的div，它又平分成两个子div，宽度是100%，高度是50%；每个div中声明了一个solt插槽用来接收传过来的数据。

solt是vue3前的。

script中的src是引用对应的js。当然js可以直接写在script中，而不用单独写一个js文件。

export default {
    name: "schedulePane"
}

说明：这儿声明的schedulePane在后面注册组件时要用到；

2、注册封装的组件；

分为全局注册跟局部注册；

此处只说全局注册：

        在main.js中注册

        import schedulePane from “组件路径”;//自定义的组件。schedultPane是自定义组件对应的js中声明的，要保持一致。

        app.use(schedulePane);

局部注册还在研究中。。。

3、引入封装的组件；

<el-row v-for="(arr) in all" :key="weekArr" :offset="1">
  <el-col class="calPane" :span="3" v-for="(wek) in arr" :key="wek" :offset="0">
    <schedulePane><h1>{{wek}}</h1><h1>{{wek}}</h1></schedulePane>
  </el-col>
</el-row>

我这里是循环调用的。结果如上图所示。

后续继续。。。。。。