Vuejs webpack 中 App.vue 与其他组件的关系

Posted 2023-02-23

【中文标题】Vuejs webpack 中 App.vue 与其他组件的关系

【英文标题】：The relation between App.vue and Other component at Vuejs webpack

【发布时间】：2019-02-14 11:24:48

【问题描述】：

我用 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 的 mount 步骤中更改 HomeView.vue。

【问题讨论】：

仅供参考，新的@vue/cli v3 比 v2（您正在使用的那个）好得多

这个问题对于 *** 来说有点太宽泛了，但总的来说...... “App.vue 和 HomeView.vue 的父子关系” “如何在 HomeVuer.vue 中使用 App.vue 的数据”

感谢您的评论。改标题是不是更好？ “如何在 webpack 默认模板下使用 HomeVuer.vue 中 App.vue 的数据？”

【参考方案1】：

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

要通过道具，您可以检查：https://router.vuejs.org/guide/essentials/passing-props.html

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

【讨论】：

这正是我想知道的。我使用 vuex 解决了这个问题。谢谢。

【参考方案2】：

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

表示路由视图组件是主应用视图组件的子组件。