vue中export default用法

Vue.js 中的 export default 用法

在 Vue.js 中，export default 语法用于将一个组件、模块或值导出为默认导出。这种导出方式与命名的导出不同，因为默认导出只能有一个，并且不需要指定导出名称。

用法

要在 Vue.js 中使用 export default，可以按照以下语法：

立即学习“前端免费学习笔记（深入）”；

export default {  // 组件、模块或值的代码};

例如：

export default {  name: 'MyComponent',  template: '<p>This is my component.</p>'};

好处

使用 export default 有几个好处：

导入

使用 export default 导出的组件、模块或值可以通过以下语法导入：

import MyComponent from './MyComponent.vue';

MyComponent.vue 是导出组件的文件路径。

示例

让我们看一个使用 export default 导出的组件的示例：

MyComponent.vue

<template><p>This is my component.</p></template><script>export default {  name: 'MyComponent'};</script>

App.vue

<template><mycomponent></mycomponent></template><script>import MyComponent from './MyComponent.vue';</script>

在这个示例中，MyComponent.vue 使用 export default 导出了一个名为 MyComponent 的组件。在 App.vue 中，这个组件被导入并渲染。