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

Question

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

我想使用和分发此组件（及其子组件）以用于任何 html 页面。

很简单，对吧？

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

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

Answer 1

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

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

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

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

这适用于Vue应用作为子应用（widget）使用的情况。对于与框架无关的可重用组件，必须使用 web components。

Answer 2

所以我不确定您的具体用例是什么，但如果您有兴趣制作多页应用程序 (MPA)，那么我建议您查看发布的答案 .

你在这里要做的实际上是安装一个 instance of the Vue App itself onto an element every html page, and then pass props to that and it's children. Vue itself doesn't really support passing props to the root instance using element attributes, and it isn't the recommended way of using the framework, but if you are still interested in going down this route, I suggest taking a look at this answer here.

我建议做的是看看创建组件，然后传递它们。 You can make separate files for each, and render them all in the main page, no need to create other pages. If that's something you're interested in, I suggest taking a look at routes 或使您的项目成为多页应用程序 (MPA) 而不是单页应用程序 (SPA)，尽管相同的概念仍然适用，将组件传递给您的主实例并以这种方式构建您的应用程序。

为了将参数传递给 Vue 3 中的组件，我建议查看文档 here 上的 props 页面以了解更多详细信息。

希望对您有所帮助！我尽力做到全面，不过我建议您通读完整的文档！

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

How to Export Vue component and reuse it in any html page passing parameters?

vue.js

vue-component

vuejs3