时间戳

首页 > 解决方案 > 如何导出 Vue 组件并在任何 html 页面传递参数中重用它？

vue.js - 如何导出 Vue 组件并在任何 html 页面传递参数中重用它？

问题描述

我是 Vue 3 的新手，我刚刚创建了我的第一个现实生活中的 Vue 项目。

我想使用和分发这个组件（及其子组件）以在任何 html 页面中使用。

这很容易，对吧？

<div id="app"></div>
<script src="/js/chunk-vendors.99a5942c.js"></script>
<script src="/js/app.042d60b5.js"></script>

但是在一些普通的html页面中重用主组件时，如何将参数传递给主组件呢？

标签： vue.jsvue-componentvuejs3

解决方案

参数可以作为全局变量传递和读取：

<div id="app"></div>
<script>
window.myNamespace = { foo: 1 };
</script>
...

或者作为属性传递并从app元素中读取：

<div id="app" data-foo="1"></div>
...

这适用于将 Vue 应用程序用作子应用程序（小部件）时。对于与框架无关的可重用组件，必须使用Web 组件。

推荐阅读