Vuejs2 如何将VueJS模板的内容拆分到多个文件中

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

<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>

我的变量：{{myVar}}
项目：{{item}
项目：{{item}

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

主文件：

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

<script>
import PComponent from './PComponent'

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

从“/PComponent”导入PComponent
导出默认值{
组成部分：{
PComponent
}
}

PComponent.vue：

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

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

变量：{{var}}

导出默认值{
道具：['var']
}

主文件：

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

<script>
import PComponent from './PComponent'

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

从“/PComponent”导入PComponent
导出默认值{
组成部分：{
PComponent
}
}

PComponent.vue：

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

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

变量：{{var}}

导出默认值{
道具：['var']
}

您还可以通过使用

v-for

进一步改进代码，感谢您的回答，但不建议从子组件编辑主组件中使用的变量。我已经更新了我文章的源代码，以便更好地显示我的问题。您还可以使用

v-for

进一步改进代码，谢谢您的回答，但不建议从子组件编辑主组件中使用的变量。我已经更新了帖子的源代码，以便更好地显示我的问题。可能是这样的：我不想在代码中添加更多逻辑，只想将模板拆分为不同的文件，以使其更易于阅读和编辑。您拥有的内容易于阅读和编辑。。在vue中，您可以创建抽象的东西，如链接所示（如何将数据从子级传递和接收到父级等）。这个最小的示例易于阅读和编辑，但实际代码实际上要大得多。不建议将父组件变量从子组件更改为父组件变量。您的权利，您在哪里看到的？可能是这样的：我不想在代码中添加更多逻辑，只想将模板拆分为不同的文件，以使其更易于阅读和编辑。您拥有的内容易于阅读和编辑。。在vue中，您可以创建抽象的东西，如链接所示（如何将数据从子级传递和接收到父级等）。这个最小的示例易于阅读和编辑，但实际代码实际上要大得多。不建议从子组件更改父组件变量。您的权利，您在哪里看到的？