主页 / coding / 问题 / 79352160
Accepted
joseph son
Asked: 2025-01-13 20:19:45 +0800 CST

为什么将一个应用程序加载到两个 div 不起作用

  • 772

你们能告诉我我这里遗漏了什么吗？我试图加载一app到两个，div但我发现它只适用于第一个。

下面，我期待的消息div2app1没有到来。提前致谢

<div id="div1app1">
    This is div1 for app1 {{ message }} 
</div>  

<!--lots of html an JS in between -->

<div id="div1app2">
  This is div1 for app2 {{ msg }}   
</div> 

<!--lots of html an JS in between -->   
   
<div id="div2app1">
   This is div2 for app1 {{ message }}   
</div> 


<script type="module">
import { createApp, ref, defineProps, onMounted, shallowReactive, reactive } from 'vue'
      
const app1 = createApp({
  setup() {
    onMounted(async () => {
      console.log('Hello')     
      message.value = 'New Hello'
    })  
    const message = ref('Hello Vue!')
    return {              
      message
    }
  }
})
const app2 = createApp({
  setup() {
    onMounted(async () => {
      console.log('Hello')
      msg.value = 'Hello for App2'
    })

    const msg = ref('Hello Vue!')
    return {       
      msg
    }
  }
})  

app1.mount('#div1app1');
app1.mount('#div2app1');
app2.mount('#div1app2');

</script>
vuejs3

1 个回答

  1. Best Answer

    一个应用程序实例只能安装到一个 DOM 元素：

    const app = createApp()
app.mount('#app-1')
// this won't do anything, app is already mounted to #app-1:
app.mount('#app-2')

    但是你可以创建具有相同内容的多个应用程序实例，并将它们挂载在不同的 DOM 节点中：

    const App = {
  template: '<div>some app</div>'
  setup() {
    // Vue magic goes here
  }
}

const app1 = createapp(App).mount('#app-1')
const app2 = createapp(App).mount('#app-2')

    如果您希望在 DOM 中的多个不相关的位置呈现相同的功能，并让它们完美同步，那么可以想到两种方法：

    1. 使用相同的应用程序定义创建多个不同的应用程序实例：

    const { defineComponent, reactive, createApp } = Vue

const state = reactive({
  foo: 'change me...'
})

const MyApp = {
  template: '<div>Hello from app. <input v-model="foo"></div>',
  setup: () => state
}

const app1 = createApp(MyApp).mount('#app-1')
const app2 = createApp(MyApp).mount('#app-2')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script>
<div id="app-1"></div>
<div id="app-2"></div>

    1. 使用 Vue 的原生<Teleport />组件（例如：将您的“应用程序”定义为组件，然后使用实际的应用程序来就地显示其中一个“组件”，并将另一个传送到#div-2）：

    const { defineComponent, reactive, createApp } = Vue

const state = reactive({
  foo: 'change me...'
})

const MyApp = {
  template: '<div>Hello from app. <input v-model="foo"></div>',
  setup: () => state
}

const app = createApp().component('my-app', MyApp).mount('#app-1')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script>
<div id="app-1">
  <my-app></my-app>
  <teleport to="#app-2">
    <my-app></my-app>
  </teleport>
</div>

<!-- this can be anywhere in DOM -->
<div id="app-2"></div>

    为什么应用程序实例只能在 DOM 中的一个位置呈现？

    因为 Vue 就是这样设计的。

    或者更详细地说，因为 99.99% 的情况都需要这样做，并且能够同时在多个 DOM 元素中呈现同一个应用程序实例会给 Vue 增加无用的额外复杂性，而几乎没有任何好处，因为它已经可以通过现有的 API 实现。

    • 1

相关问题