八. vue文件里的export default解释

最新推荐文章于 2026-04-20 04:12:13 发布

转载最新推荐文章于 2026-04-20 04:12:13 发布 · 7.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.jiangweishan.com/article/vue1.html

收录于

当前文章被收录于：

33 篇文章 9 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细解读了.vue文件中exportdefault的作用，展示了如何导出并导入组件，并通过实例演示了在Vue项目中的使用。学习者将理解组件导出的必要性和基本操作。

.vue文件一般都是以模板形式存在，我们会在里面定义页面的表现内容，其中我们会看到一个export default的东东，对于刚学的童鞋来说，估计有点蒙，今天来解释下。

export default是ES6的语法，意思是将这个东西导出，你要import 引入东西，导出了才能引用，来段代码，如下：

<script>
export default {
  name: 'hello',
  data () {
    return {
      webfront: 'Web前端之家！'
    }
  }
}
</script>

如果我们在其他页面应用这段导出的代码，我们必须import下Hello这个组件，如下代码：

import Vue from 'vue'
import Router from 'vue-router'
import hello from '@/components/hello'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})