我正在一个项目中构建一个管理页面，该项目使用一个名为"页面"的付费主题.
问题是，在这些主题中，<nav>和<header>必须是<body>的直接子女.
当我使用Vue bootstrap 应用程序时，我将其渲染为<div>，id设置为root.然后将<nav>和<header>嵌套在该容器内(即<div id="root">以下).
我一直在探索如何让Vue组件成为身体的直接子元素.
怎么做？
我得到的是:
<body>
<div>
<nav></nav>
<header></header>
</div>
</body>
主题需要:
<body>
<nav></nav>
<header></header>
</body>
在Vue 2.0中，无法将根实例装载到body或html元素.您将收到[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.条错误消息.
仅作为安装点提供.与Vue 1不同.x、 在所有情况下，挂载的元素都将替换为Vue生成的DOM.因此，不建议将根实例装载到
<html>或<body>.
解决方法是在component mount()事件中手动移动元素.
<div id="app">
<navbar :msg="msg"></navbar>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<button @click="msg = 'tested'">Test 2-way binding</button>
</div>
工作流示例:
new Vue({
el: '#app',
data: {
msg: 'message'
},
components: {
'navbar': {
template: `<navbar>{{ msg }}</navbar>`,
props: ['msg'],
mounted() {
document.body.insertBefore(this.$el, document.body.firstChild)
}
}
}
})