Question

使用Webpack，我有以下代码：

    import { createApp } from 'vue'
    import Vue from 'vue'
    import App from './components/ItemSearch/ItemSearch.vue'
    
    createApp(App).mount('#search-app')

在我的网站上，我有一个用于搜索应用程序的页面，其中包含<div id="search-app" />，用于将应用程序的根目录安装到该页面。

我想知道的是，是否有可能以某种方式（最好是）从包含JavaScript文件的页面插入一些数据？我希望从数据库中包含一些内容，例如设置和搜索类别，如果可以帮助的话，我想避免对它们提出AJAX请求。

可以帮忙吗，或者有什么办法可以在加载时内联包含此数据？

对于Webpack，我不太了解如何从加载JavaScript文件的页面访问App，因此我可以先修改data，然后再以某种方式将其传递给createApp()，甚至有可能。我可以在浏览器加载的页面上使用import语句，还是严格地说是仅Webpack（或类似）功能？

非常感谢。

Answer 1

您可以使用createApp的第二个参数传递道具。

import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
    
createApp(App).mount('#search-app', {myProp: "value"})

docs

将数据传递给createApp（vue）

1 个答案: