为什么 Vue.js 不更新子组件？答案

【问题标题】：Why isn't Vue.js updating a child component?为什么 Vue.js 不更新子组件？
【发布时间】：2018-04-28 00:24:24
【问题描述】：

我正在为我的标题/导航栏使用子组件。这个子组件被命名为 Header.vue。我从 App.vue 组件中导入它，如下所示：

<template>
  <div id="app" class="container">
    <navbar></navbar> 
  </div>
</template>

 <script>
 import navbar from './Header.vue'

   export default {
  name: 'app',
  firebase: {
    items: itemsRef
  },

  data () {
    return {
      newItem: {
        title: '',
        author: '',
        year: ''
      }
    }
  },
components: { 
    navbar
    }
  </script>

我的子组件（Header.vue）脚本是这样的：

<template>
    <nav class="navbar navbar-default navbar-fixed-top">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <div class="navbar-right test">
            <a href="#">
            <span class="glyphicon glyphicon-shopping-cart"></span>
            </a>
            <button type="button" class="btn btn-default navbar-btn">Sign in</button>
        </div>
    </nav>
</template>

<script>
export default {
  name: 'navbar',
  data () {
    return {
      username: 'joao'
    }
  }
}

</script>

主组件更新，但 Header.vue 没有。它工作得很好，但现在它似乎卡在了我的 header.vue 组件的早期版本中并且没有更新。我在终端使用 webpack 和 npm run dev 来启动服务器。我试过清理我的缓存没有结果。我只是从 vue.js 开始，所以我很困惑。我是不是做错了什么？

【问题讨论】：

可能不相关，但您在 App.vue 文件中缺少 <div> 的结束标签。
谢谢约翰，我现在已经在这个问题上更正了这一点——但这是我在编辑代码以在这里提出问题时发生的失误。这不是原因。
您希望看到什么？
这是一个工作示例（没有 Firebase）。 codesandbox.io/s/44njx7klx
我会检查控制台中的错误。除此之外，开始删除一些东西并获得一个工作版本，然后重新添加它们，看看是什么破坏了它。

标签： vue.js vuejs2

【解决方案1】：

我想我已经明白了。子组件的路径错误...所以我从 import navbar from './components/Header.vue' 更改为 import navbar from './Header.vue' 并且它正在工作。我很奇怪它显示的是我的文件的旧版本。无法真正理解它为什么这样做。

【讨论】：