vue动态引入模块（vue 动态 import）

本篇文章给大家谈谈vue动态引入模块，以及vue 动态 import对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、不够理解import和require导入的区别被diss惨了
2、vue怎么直接引入js文件
3、基于Vue.extend(options) *** ,实现动态插入自定义组件

不够理解import和require导入的区别被diss惨了

require：是Common *** 模块规范，主要应用于Node.js环境。它遵循同步加载模块的原则，即在执行到require语句时会阻塞后续代码的执行，直到模块加载完成。import：是ES6模块规范，主要应用于现代浏览器和现代JavaScript开发（如Vue、React等前端框架）。

vue怎么直接引入js文件

*** 1：在标签中直接引入适用于全局脚本或无需模块化的传统 *** 文件（如 jQuery）。步骤：在 public/index.html 中通过标签引入：文件会全局生效，通过 window 对象访问（如 window.jQuery）。

通过标签引入适用场景：直接引入非模块化的全局 *** 文件（如 jQuery、传统库等）。 *** ：在 public/index.html 或组件模板中添加标签。特点：文件会全局生效，可通过 window 对象访问。缺点：无法享受模块化的优势（如按需加载、作用域隔离）。

在Vue项目中引用js文件有以下两种常见 *** ：之一种 *** 是在单文件组件中使用import语法引入js文件。如需引入名为utils.js的文件，直接在组件中使用：import { *** 名，变量名} from ./utils.js之后在组件中便可以直接调用utils.js中导出的相应 *** 或变量。

基于Vue.extend(options) *** ,实现动态插入自定义组件

基于Vue.extend *** ，实现动态插入自定义组件的步骤如下：创建自定义组件：在/components目录下创建一个自定义组件文件，例如ConfirmView.vue。在该文件中定义组件的结构和功能，包括标题、消息、确认/取消按钮以及相应的回调函数等。

返回一个模块对象，其 default 属性是 Vue 组件的默认导出（已构造的组件选项对象）。无需再通过 Vue.extend() 或 Vue.component() 处理，直接使用即可。

首先，创建el-input的问题。原生的input标签创建简单，但el-input是饿了么UI的封装，不能直接通过document.createElement()创建。这时，Vue.extend() *** 就派上用场了。我们需要在单独的.vue文件中定义一个输入组件，然后在data.js中继承这个组件，并通过propsData传递参数，如值或处理函数。

获取 VNode 数组的 HTML 内容 *** 一：通过自定义组件渲染并提取 outerHTML步骤：创建一个临时组件（如 DetailConstructor）来渲染 VNode 数组。挂载该组件到内存中（不插入页面）。通过 $el.outerHTML 获取渲染后的 HTML 字符串。