Rumah > Artikel > hujung hadapan web > Peranan eksport dalam vue
Kata kunci eksport dalam Vue.js digunakan untuk mengeksport komponen, arahan, campuran dan kaedah untuk digunakan dalam modul atau komponen lain. Ia boleh mengeksport: Komponen: digunakan untuk mendedahkan komponen daripada modul untuk diimport dan digunakan dalam modul lain. Arahan: Digunakan untuk mendedahkan arahan daripada modul supaya ia boleh didaftarkan dalam modul lain menggunakan Vue.directive. Campuran: Digunakan untuk mendedahkan campuran daripada modul supaya ia boleh diimport dalam komponen lain menggunakan pilihan campuran. Kaedah: digunakan untuk mendedahkan kaedah daripada modul untuk diimport dan digunakan dalam modul lain.
Peranan eksport dalam Vue
Dalam Vue.js, kata kunci eksport
digunakan untuk mengeksport komponen, arahan, campuran dan kaedah untuk digunakan dalam modul atau komponen lain . export
关键字用于导出组件、指令、混入和方法,以便在其他模块或组件中使用。
导出组件
export
组件是一种从模块中公开组件的方式。
<code class="javascript">// MyComponent.vue <template> <div>My Component</div> </template> export default { name: 'my-component' }</code>
在其他模块中,可以使用 import
导入该组件:
<code class="javascript">// main.js import MyComponent from './MyComponent.vue' new Vue({ components: { MyComponent } })</code>
导出指令
export
指令是一种从模块中公开指令的方式。
<code class="javascript">// my-directive.js export default { bind(el, binding) { }, update(el, binding) { }, unbind(el) { } }</code>
在其他模块中,可以使用 Vue.directive
注册该指令:
<code class="javascript">// main.js import myDirective from './my-directive.js' Vue.directive('my-directive', myDirective)</code>
导出混入
export
混入是一种从模块中公开混入的方式。
<code class="javascript">// my-mixin.js export default { created() { }, mounted() { }, beforeDestroy() { } }</code>
在其他组件中,可以使用 mixins
选项导入该混入:
<code class="javascript">// MyComponent.vue <template> <div>My Component</div> </template> export default { mixins: [myMixin] }</code>
导出方法
export
方法是一种从模块中公开方法的方式。
<code class="javascript">// my-utils.js export function myMethod() { }</code>
在其他模块中,可以使用 import
<code class="javascript">// main.js import { myMethod } from './my-utils.js' myMethod()</code>🎜Dalam modul lain, anda boleh menggunakan
import
untuk mengimport komponen ini: 🎜rrreee🎜🎜Arahan eksport🎜🎜🎜 Arahan eksport
ialah cara untuk mendedahkan arahan daripada modul . 🎜rrreee🎜Dalam modul lain, anda boleh menggunakan Vue.directive
untuk mendaftar arahan ini: 🎜rrreee🎜🎜Export mixin🎜🎜🎜mixin
: 🎜rrreee🎜🎜Kaedah eksport🎜🎜🎜Kaedah import
untuk mengimport kaedah ini: 🎜rrreeeAtas ialah kandungan terperinci Peranan eksport dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!