vue3 defineExpose 原理

vue3 defineExpose 原理

import { defineExpose } from 'vue';


const onClose =()=> {
  alert('关闭')
};

defineExpose({ onClose });

编译之后 变成

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/outer.vue");import { defineComponent as _defineComponent } from "/node_modules/.vite/deps/vue.js?v=99ae7b0f";
import { ref } from "/node_modules/.vite/deps/vue.js?v=99ae7b0f";
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "outer",
  props: {
    msg: { type: String, required: true },
    title: { type: String, required: true }
  },
  emits: ["onSubmit"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const emits = __emit;
    const count = ref(0);
    const onSubmit = () => {
      emits("onSubmit");
    };
    const onClose = () => {
      alert("\u5173\u95ED");
    };
    __expose({ onClose });  defineExpose 变成
    const __returned__ = { emits, count, onSubmit, onClose };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

__expose({ onClose }); 执行代码

// vue 源码
function createSetupContext(instance) {
  /// __expose({ onClose }); 调用执行 走到
  const expose = (exposed) => {
    if (true) {
      if (instance.exposed) {
        warn$1(`expose() should be called only once per setup().`);
      }
      if (exposed != null) {
        let exposedType = typeof exposed;
        if (exposedType === "object") {
          if (isArray(exposed)) {
            exposedType = "array";
          } else if (isRef2(exposed)) {
            exposedType = "ref";
          }
        }
        if (exposedType !== "object") {
          warn$1(
            `expose() should be passed a plain object, received ${exposedType}.`
          );
        }
      }
    }
    instance.exposed = exposed || {};
  };
  / ...code
}
相关推荐
小远yyds28 分钟前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
weixin_516875651 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js
H_HX1261 小时前
https服务器访问http资源报Mixed Content混合内容错误
前端·vue.js·安全策略·https访问http
卡布叻_星星2 小时前
同一个页面击穿element样式后,会影响同样组件的使用
前端·vue.js·elementui
加油小吃货2 小时前
定义全局键盘监听事件,el-dialog中删除不可用
javascript·vue.js·elementui
貂蝉空大2 小时前
vue el-table组件实现展开行 默认展开全部
javascript·vue.js·element-plus
猫猫村晨总2 小时前
涉及到行合并的el-table表格导出功能实现
前端·vue.js·element plus
晨旭缘2 小时前
vue3动态监听div高度案例
vue.js·html
VillanelleS2 小时前
Vue2进阶之Vue3高级用法
前端·javascript·vue.js
qq22951165023 小时前
uniapp+vue加油服务系统 微信小程序
vue.js·微信小程序·uni-app