英文:
Render only certain components of VueJs
问题
遇到了在现有的JSF应用中集成新的Vue组件的问题。
到目前为止，我已经创建了一个外部Vue应用，并在构建后（例如 npm run build）导入到应用中，现在我是这样访问的：
- head main.xhtml
<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
<script type="application/javascript" src="../../resources/js/frontend/js/chunk-vendors.[HASH].js"></script>
<script type="application/javascript" src="../../resources/js/frontend/js/app.[HASH].js"></script>
<link rel="stylesheet" href="../../resources/js/frontend/css/app.[HASH].css"/>
- body targetPage.xhtml
<div id="app"></div>
<script type="text/babel">
const app = Vue.createApp({
el: '#app',
});
</script>
这样显示是正确的，但已经导入了一切，包括路由等。
是否有任何方法只在不同页面上显示特定组件或更好地控制显示什么？
我尝试过分别导出不同的组件，或在脚本中指定组件添加方式：
components: {
MyComponent,
},
以及在目标div中：
<MyComponent props:... ></MyComponent>
但它没有呈现，而是显示整个应用程序。
我不知道是否有可能为组件分配与当前页面URL相同的路由值，如果我需要在同一页面上有两个不同的组件，这可能会成为问题。
英文:
got an issue trying to integrate a new Vue component in an existing JSF app.
So far i've created an external Vue app and once builded (i.e. npm run build), imported in the app, now im accessing to in this way:
- head main.xhtml
<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"/>
<script type="application/javascript" src="../../resources/js/frontend/js/chunk-vendors.[HASH].js"></script>
<script type="application/javascript" src="../../resources/js/frontend/js/app.[HASH].js"></script>
<link rel="stylesheet" href="../../resources/js/frontend/css/app.[HASH].css"/>
- body targetPage.xhtml
<div id="app"></div>
<script type="text/babel">
const app = Vue.createApp({
el: '#app',
});
</script>
Which displays correctly but has imported everyting even routing, ecc.
Is there any way to show only certain components across diffrent pages or have more control of what is shown?
I've tried to export different components separately or specify the component adding in the script
components: {
MyComponent,
},
and in the targeted div <MyComponent props:... ></MyComponent> but isn't rendered is shown instead the whole application.
I don't know if it could be even possible to assign components routes values the same as the current page url, it could be a problem if i need two diffrent of those in the same page.
答案1
得分: 1
如果您想使用与 <App> 不同的根组件渲染应用程序，请使用以下代码：
function createApp(rootComponent: Component, rootProps?: object): App
所以，
const app = Vue.createApp(MyComponent, { el: '#app' })
但通常您会使用路由器，请参阅 https://vitesse.netlify.app/ 或 https://github.com/antfu/vitesse 作为示例。
英文:
If you want to render the app with root component different from the <App>, use
function createApp(rootComponent: Component, rootProps?: object): App
so,
const app = Vue.createApp(MyComponent, { el: '#app' })
Bud generally you'd use Router, see https://vitesse.netlify.app/ / https://github.com/antfu/vitesse for example
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论