vue中export作用

vue.js 中的 export 关键字用于导出组件、指令、混入和方法，以便在其他模块或组件中使用。它可以导出：组件：用于从模块中公开组件，以便在其他模块中导入使用。指令：用于从模块中公开指令，以便在其他模块中使用 vue.directive 注册指令。混入：用于从模块中公开混入，以便在其他组件中使用 mixins 选项导入混入。方法：用于从模块中公开方法，以便在其他模块中导入使用。

Vue 中 export 的作用

在 Vue.js 中，export 关键字用于导出组件、指令、混入和方法，以便在其他模块或组件中使用。

导出组件

export 组件是一种从模块中公开组件的方式。

// MyComponent.<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>
<template><p>My Component</p>
</template>

export default {
  name: 'my-component'
}

登录后复制

在其他模块中，可以使用 import 导入该组件：

// main.js
import MyComponent from './MyComponent.vue'

new Vue({
  components: { MyComponent }
})

登录后复制

导出指令

export 指令是一种从模块中公开指令的方式。

// my-directive.js
export default {
  bind(el, binding) { },
  update(el, binding) { },
  unbind(el) { }
}

登录后复制

在其他模块中，可以使用 Vue.directive 注册该指令：

// main.js
import myDirective from './my-directive.js'

Vue.directive('my-directive', myDirective)

登录后复制

导出混入

export 混入是一种从模块中公开混入的方式。

// my-mixin.js
export default {
  created() { },
  mounted() { },
  beforeDestroy() { }
}

登录后复制

在其他组件中，可以使用 mixins 选项导入该混入：

// MyComponent.vue
<template><p>My Component</p>
</template>

export default {
  mixins: [myMixin]
}

登录后复制

导出方法

export 方法是一种从模块中公开方法的方式。

// my-utils.js
export function myMethod() { }

登录后复制

在其他模块中，可以使用 import 导入该方法：

// main.js
import { myMethod } from './my-utils.js'

myMethod()

登录后复制

以上就是vue中export作用的详细内容，更多请关注小编网其它相关文章！