如何将VueJS模板的内容拆分为多个文件

Question

在下面的示例中，我希望将应用程序的显示保留在主文件中，并将设置版本保留在单独的文件中（每个设置一个文件），以获得更清晰的代码和更好的可读性。

<template>
  <div>

    <!-- KEEP DISPLAY IN MAIN FILE -->

    <!-- display myVar content -->
    <div>my var: {{ myVar }}</div>

    <!-- display myArray content -->
    <div v-for="(item, index) in myArray" :key="i">
      item: {{ item }}
    </div>

    <!-- display myObject content -->
    <div v-for="(item, index) in myObject['foo']" :key="i">
      item: {{ item }}
    </div>

    <!-- MOVE TO FILE A: myVar settings -->
    <input type="text" v-model="myVar" />

    <!-- MOVE TO FILE B: myArray settings -->
    <div v-for="(s, index) in myArray" :key="i">
      <input type="text" v-model="myArray[i]" @change="resetMyArray" />
    </div>

    <!-- MOVE TO FILE C: myObject settings -->
    <div v-for="(abc, index) in myObject.foo" :key="i">
      <input type="text" v-model="myObject.foo[index]" />
      <input type="text" v-model="myObject.bar[index]" />
    </div>

  </div>
</template>

我应该如何将此模板拆分为多个文件？

Answer 1

主文件：

<template>
  <div>
    <PComponent :var="var1"/>
    <PComponent :var="var2"/>
    <PComponent :var="var3"/>
  </div>
</template>

<script>
import PComponent from './PComponent'

export default {
  components: {
    PComponent
  }
}
</script>

PComponent.vue：

<template>
   <p>var: {{ var }}</p>
</template>

<script>
export default {
  props: ['var']
}
</script>

Answer 2

2024：Vue3 答案

您可以在此处阅读有关组件基础知识的更多信息。

要将较大的组件拆分为较小的组件，请首先创建子组件：

<script setup>

</script>
<template>
  <div>
     Hello Small World
  </div>
</template>

然后将它们导入到父组件中并使用它们：

<script setup>
  import ChildComponent from './ChildComponent.vue'
</script>
<template>
  <div>
    <ChildComponent />
    <ChildComponent />
  </div>
</template>