Home > Article > Web Front-end > The role of export in vue
The export keyword in Vue.js is used to export components, directives, mixins, and methods for use in other modules or components. It can export: Components: used to expose components from a module for import and use in other modules. Directive: Used to expose directives from modules so that they can be registered in other modules using Vue.directive. Mixins: Used to expose mixins from a module so that they can be imported in other components using the mixins option. Method: used to expose methods from the module for import and use in other modules.
The role of export in Vue
In Vue.js, the export
keyword Used to export components, directives, mixins, and methods for use in other modules or components.
Export components
export
Components are a way to expose components from a module.
<code class="javascript">// MyComponent.vue <template> <div>My Component</div> </template> export default { name: 'my-component' }</code>
In other modules, you can use import
to import this component:
<code class="javascript">// main.js import MyComponent from './MyComponent.vue' new Vue({ components: { MyComponent } })</code>
Export directive
export
Directives are a way of exposing directives from modules.
<code class="javascript">// my-directive.js export default { bind(el, binding) { }, update(el, binding) { }, unbind(el) { } }</code>
In other modules, you can use Vue.directive
to register this directive:
<code class="javascript">// main.js import myDirective from './my-directive.js' Vue.directive('my-directive', myDirective)</code>
Export mixin
export
Mixins are a way to expose mixins from a module.
<code class="javascript">// my-mixin.js export default { created() { }, mounted() { }, beforeDestroy() { } }</code>
In other components, this mixin can be imported using the mixins
option:
<code class="javascript">// MyComponent.vue <template> <div>My Component</div> </template> export default { mixins: [myMixin] }</code>
Export method
The export
method is a way of exposing methods from a module.
<code class="javascript">// my-utils.js export function myMethod() { }</code>
In other modules, you can use import
to import this method:
<code class="javascript">// main.js import { myMethod } from './my-utils.js' myMethod()</code>
The above is the detailed content of The role of export in vue. For more information, please follow other related articles on the PHP Chinese website!