文章/答案/技术大牛

发布

社区首页 >问答首页 >如何正确挂载-DOM根组件模板

问如何正确挂载-DOM根组件模板
EN

Stack Overflow用户

提问于 2022-11-02 10:05:16

回答 1查看 33关注 0票数 1

显然，我对vue3 "In-DOM根组件模板“-mechanism的工作方式存在误解。任何暗示都很感激！

我修改了一个示例vite项目以使用"-DOM根组件模板“。

index.html

    <body>
        <div id="app">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg" class="logo" alt="Vite logo" />
                </a>
            </div>
            <hello-world msg="Vite + Vue"></hello-world>
        </div>
        <script type="module" src="/src/main.js"></script>
    </body>

main.js

import { createApp } from 'vue'
import './style.css'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp({})

app.component('HelloWorld',HelloWorld)

app.mount('#app')

HelloWorld是默认的示例组件，由vite安装安装。

结果:呈现的输出为空，div#app-innerHtml未按预期用作模板。

vue.js

vue-component

vite

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-02 11:03:14

我在这里有一个js错误，const app = createApp() 错误:无法读取未定义的属性(读取“呈现”)。

Vue选项不应该是未定义的。请将其替换为：

const app = createApp({})

您在PascalCase中将组件注册为HelloWorld，并在HTML中以相同的方式使用它。但你应该用烤肉串<hello-world>。

Vue Docs 使用组件中对此有一个解释：

如果您直接在DOM中创作模板(例如，作为本机元素的内容)，则模板将受浏览器的原生HTML解析行为的制约。在这种情况下，您需要对组件使用kebab-case和显式结束标记s。

请注意显式结束标记。

当你解决这两个问题时，这个应用程序就能工作了。这是工作操场

https://stackblitz.com/edit/vue-n2v2y4?file=public/index.html

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74287431

复制

相似问题

问如何正确挂载-DOM根组件模板
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确挂载-DOM根组件模板EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确挂载-DOM根组件模板
EN