Vuejs Webpack上App.vue和Other组件之间的关系

Question

我用webpack安装了vuejs。

vue init webpack frontend

然后在main.js上使用vue-router

routes: [
  {
      path: '/',
      name: 'Home',
      component: HomeView
  },

App.vue就像这里。

<template>
  <div>
    <div id='toparea'></div>
    <router-view></router-view>
    <div id='btmarea'></div>
  </div>
</template>

文件结构在这里

App.vue和HomeView.vue专利与子专利的关系吗？ 如何在HomeVuer.vue中使用App.vue的数据？

更具体：

我这样在App.vue上打印了一个变量。

<div id='toparea'>
    <span v-html="variable_foo"></span>
</div>

我想在HomeView.vue的安装步骤中在HomeView.vue进行更改。

Answer 1

App.vue和HomeView.vue之间没有特殊关系。 App.vue用于根组件。 HomeView是用于呈现页面的组件之一。该组件将在<router-view></router-view>上呈现。如果您在路由器上注册了某些组件，则可以通过router-view查看它们。

要传递道具，您可以检查以下内容：https://router.vuejs.org/guide/essentials/passing-props.html

或者您可以使用Vuex（https://vuex.vuejs.org/）进行状态管理。 App.vue和HomeView.vue可以与其共享状态。

Answer 2

我发现App.vue显然是vuejs devtool中HomeView.vue的父级。

这意味着路由器视图组件是主要应用程序视图组件的子视图。