Question

我想通过Vue.js增强我的（Drupal）主题的UI，以用于某些部分，功能和组件。 Vue已正确加载并构建（Webpack）。

在我的page.html.twig文件（Drupal的主页模板文件）中，我通过以下方式触发Vue：

<div id="app">

然后我具有以下结构：

从 index.js 导入Vue和App.vue：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

从 App.vue 中，我想导入和控制所有（子）组件，例如：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld'

  export default {
    name: 'app',
    components: {
      HelloWorld
    }
  }
</script>

<style></style>

现在，我遇到一个问题，因为我有一个Vue实例<div id="app">。

但是例如header.html.twig我需要另一个Vue实例，并在此处导入其他一些Single文件组件。

我如何利用多个Vue实例并能够使用单个文件组件？

我的方法正确吗？

如何正确使用多个Vue实例和单个文件组件（以我的Drupal主题）

0 个答案: