vue中export作用

Vue.js 中的 export 關鍵字用於匯出元件、指令、混入和方法，以便在其他模組或元件中使用。它可以導出：元件：用於從模組中公開元件，以便在其他模組中匯入使用。指令：用於從模組中公開指令，以便在其他模組中使用 Vue.directive 註冊指令。混入：用於從模組中公開混入，以便在其他元件中使用 mixins 選項匯入混入。方法：用於從模組中公開方法，以便在其他模組中導入使用。

Vue 中export 的作用

在Vue.js 中，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>

以上是vue中export作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！