×

.vue文件里的export default解释

作者:andy0012020.01.07来源:Web前端之家浏览:55322评论:2
关键词:vueexport default

500.jpg

.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
    }
  ]
})

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vue1.html

网友评论文明上网理性发言 已有2人参与

发表评论:

评论列表

  • 访客 访客  发布于 2020-05-27 16:44:17   回复该评论
  • export default和vue的实例有啥子区别呢 都可以被import
    • Terry Terry  发布于 2020-05-28 15:19:59   回复该评论
    • 当然都可以被import,如何去设置,还要看你的具体项目要求。