Question

我有一个简单的 index.html 文件。它包含 Vue JS 应用程序并具有以下代码。

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <script>
            const foo = {
                bar: 100
            };
        </script>
        <script src="main.js"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>

这是 Vue JS 应用程序的外观。

main.js

import Vue from "vue"
import App from "./App.vue"

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount("#app")

App.vue

<template>
    <div>
        {{ config.bar }}
    </div>
</template>

<script>
export default {
    props: {
        config: {
            type: Object,
            default: () => {},
        },
    }
}
</script>

我只是想将 const foo 变量传递到 App.vue 文件中。我已经尝试将它作为道具传递给 <div id="app" :config="foo"></div>，但是它确实在 App.vue 中抛出了一个未定义的错误。

如何将 JS 变量从 HTML 传递到 Vue 应用程序和组件？

如何将 JSON 变量传递给 Vue App + Components

0 个答案: