时间戳

首页 > 解决方案 > Vue.js 导出默认对象范围

javascript - Vue.js 导出默认对象范围

问题描述

谁能解释一下export defaultvue文件的范围？谢谢你。

例子：

HelloWorld.vue

<template>
  <div id="app">

    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
}

console.log(HelloWorld) // ReferenceError: HelloWorld is not defined
</script>

App.vue

<template>
  <div id="app">

    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
}

console.log(HelloWorld) // HelloWorld is defined
</script>

标签： javascriptvue.js

解决方案

如果您想在其内部使用一个组件，那么您正在寻找一个递归组件https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components。您可以通过将 HelloWorld.vue 中的 name 选项值更改为唯一值来实现这一点。（注意 HelloWorld.vue 和 App.vue 具有相同的名称）

注意：递归使用组件可能会导致无限循环，因此请确保使用会在某个时间点导致错误值的条件执行此操作。

最后，您有 ReferenceError 的原因不是因为 export default 的范围。这是因为您在定义之前使用了组件。为了解决这个问题，您可以使用 webpack 的异步导入（记得将组件名称值更改为唯一）。要进行异步导入，请删除脚本部分顶部的导入语句，然后像这样导入组件：

components: {
      HelloWorld: () => import('./components/HelloWorld.vue')
}

注意：我假设你在这里使用的是 webpack 构建系统。

推荐阅读