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
}
相关推荐
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全3 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ3 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六3 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保3 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~3 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
周三有雨3 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
大霞上仙5 小时前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛5 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui