VUE3開發基礎：使用extends繼承元件-Vue.js-PHP中文網

VUE3開發基礎：使用extends繼承元件

WBOY

發布： 2023-06-16 08:58:12

原創

6671 人瀏覽過

Vue是目前最受歡迎的前端框架之一，而VUE3則是Vue框架的最新版本，相較於VUE2，VUE3具備了更高的性能和更出色的開發體驗，成為了眾多開發者的首選。在VUE3中，使用extends繼承元件是一個非常實用的開發方式，本文將為大家介紹如何使用extends繼承元件。

extends是什麼？

在Vue中，extends是一個非常實用的屬性，它可以用於子元件繼承父元件的選項，例如在父元件中定義了一個模板，並且透過extends屬性將其傳遞給子元件，在子元件中就可以直接使用該模板，而不需要重新定義。這種繼承方式可以實現程式碼的複用，減少了程式碼量，提高了開發效率。

如何使用extends？

首先，我們需要定義一個父元件，定義一個模板，並將其儲存為一個單獨的文件，例如HelloWorld.vue:

<template>
  <div>
    <h1>Hello, {{name}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'Vue3'
    },
    content: {
      type: String,
      default: 'Welcome to Vue3'
    }
  }
}
</script>

登入後複製

在父元件中，我們需要透過extends屬性將該範本傳遞給子元件，將定義好的範本儲存為Mixins.js文件，例如：

export default {
  extends: HelloWorld    //继承HelloWorld.vue
}

登入後複製

這裡的HelloWorld是我們在父元件中定義的元件名稱。

接下來，我們需要在子元件中引入Mixins.js，並使用extends繼承父元件選項，將其儲存為單獨的文件，例如App.vue:

<template>
  <div>
    <HelloWorld />    //使用extends继承HelloWorld.vue的模板
    <p>{{message}}</p>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Mixins from './Mixins'

export default {
  mixins: [Mixins],    //引入Mixins.js
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'This is App.vue'
    }
  }
}
</script>

登入後複製

使用mixins屬性將Mixins.js引入，並在template中使用該元件。最後，我們需要將子元件App.vue渲染到Vue應用的根元件中，例如：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

登入後複製

總結

使用extends繼承元件是一個非常實用的開發方式，可以幫助我們實現程式碼的複用，提高開發效率。在VUE3中，extends屬性的使用非常簡單，只需要在父元件和子元件中定義好範本和繼承關係即可。希望這篇文章能對開發者們有所幫助，讓大家在使用VUE3開發中更加得心應手。

以上是VUE3開發基礎：使用extends繼承元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！