Question

我在标题/导航栏中使用子组件。此子组件名为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，所以我很困惑。我做错了吗？

Answer 1

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

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

1 个答案: