VUE3的slot要加template

今天element-ui升级element-plus的时候发现下拉菜单框报错

v2写法

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="volume = 100">100ml</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="volume = 200">200ml</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="volume = 300">300ml</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="volume = 400">400ml</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="volume = 500">500ml</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="volume = 1000">1000ml</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

v3写法

        <template #dropdown>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span @click="bottle = 1"
                    >1{{ store.state.isChinese ? "号瓶" : "Bottle" }}</span
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <span @click="bottle = 2"
                    >2{{ store.state.isChinese ? "号瓶" : "Bottle" }}</span
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>

原因发现是vue3在使用slot的时候必须配置template，否则会报错

v3中ref和let定义相冲突

全局方法，原型链

const userName= ref('张三');

vite使用router和vuex和父传子

import { useStore } from "vuex";

import {

useRouter,

useRoute,

onBeforeRouteUpdate,

onBeforeRouteLeave,

} from "vue-router";

hash和history

Vite之中缺requireFn

v2与v3使用全局（main.js）方法

vue3

import { createApp, ref } from "vue";

const app = createApp(App);
app.config.globalProperties.mqttConnect = mqttConnect;

//vue3中使用
import { getCurrentInstance } from "vue";
const internalInstance = getCurrentInstance();
const globalProperties = internalInstance.appContext.config.globalProperties;
    globalProperties.mqttConnect.doPublish(JSON.stringify(bootData));

vue2中，挂载到原型链中

import mqttConnect from "./utils/mqttConnect"
Vue.prototype.mqttConnect = mqttConnect;
this.mqttConnect.doPublish(JSON.stringify(bootData));

vue3中触发app.vue中的方法

app.vue导出方法
provide("unSubMqtt", unSubMqtt);

其他路由总导入使用
const unSubMqtt: any = inject("unSubMqtt");

vue2中触发app.vue中的方法

      this.$parent.unSubMqtt();

vue2中watch用法

vue3中watch用法

vue2中引子组件

    <myAlert ref="myAlert" />
import myAlert from "@/components/myAlert.vue";
        this.$refs.myAlert.DialogShowFn(
          this.$store.state.isChinese
            ? "当前没有任务，请先新建一个任务"
            : "Currently no tasks, please add a task first"
        );
        //需要注册
          components: { tobytes, myAlert },

vue3中引子组件

注意！！ref的名称不要和组件名称一样

 <myAlert ref="myalert" />
import myAlert from "./components/myAlert.vue";
const myalert = ref();
//ref表示获取的节点，节点的value的方法就可以调用子组件的方法
      myalert.value.DialogShowFn(
        store.state.isChinese
          ? "账号在其它地方登录"
          : "This account has already logged in on another device!"
      );