【Vue】Vue.extend()在非vue项目中使用vue组件

【Vue】Vue.extend()在非vue项目中使用vue组件

假设项目目录结构如下：

- src
  - components
    - Layer.vue
  - page
    - index.html

在 index.html 引入 layer.vue 组件：

import Vue from "vue";
import Layer from "@/components/Layer.vue";

// 初始化组件实例
const compConstruct = Vue.extend(Layer);
const compInstance = new compConstruct();

// 将组件绑定到页面
const div = document.createElement("div");
document.body.appendChild(div);
compInstance.$mount(div);

此时 Layer 组件已被添加至页面中，可通过组件实例（compInstance）控制组件：

// 监听组件内部抛出的 $emit('close') 事件
compInstance.$on("close", () => {});

// 修改组件内部变量
compInstance.isShowLayer = true;