Question

我正在使用名为“pages”的付费主题的项目中构建管理页面。

问题是，在这些主题中，<nav>和<header>必须是<body>的直接子女。

当我使用Vue引导应用时，我将其呈现为<div>，id设置为root。然后，这会将<nav>和<header>嵌套在此容器中（即在<div id="root">下）。

我一直在寻找如何让Vue组件成为身体的直接孩子。

怎么做？

我得到的是什么：

<body>
    <div>
        <nav></nav>
        <header></header>
    </div>
</body>

主题需要什么：

<body>
    <nav></nav>
    <header></header>
</body>

Answer 1

使用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>。

https://vuejs.org/v2/api/#el

方法是在组件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)
      }
    }
  }
})

https://jsfiddle.net/jedrzejchalubek/m9dnsjjr/2/

Answer 2

有了Vue 3，您可以

let YourApp = {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  template: `
      <nav>Nav</nav>
      <header>Header</header>
      <span> inspect to see </span>
  `
}

// Browser Version - vue.global.js
Vue.createApp(YourApp).mount('body')

<script src="https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.global.min.js"></script>

如何将Vue的主应用程序渲染到body元素？

2 个答案: