VUE3开发基础：使用extends继承组件-Vue.js-PHP中文网

VUE3开发基础：使用extends继承组件

WBOY

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

原创

8433人浏览过

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是我们在父组件中定义的组件名。

立即学习“前端免费学习笔记（深入）”；

国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能，更是采用了目前互联网上最流行的LAMP组合（Linux+Apache+Mysql+PHP）开发完成，模板技术实现了界面与代码的有效分离，用户可以快速地在此基础上编译模板；提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

查看详情

接下来，我们需要在子组件中引入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中文网其它相关文章！

大家都在看：

Vue的v-bind和v-on的语法糖分别是什么？学习Vue.js的最佳实践博客有哪些 Vue的异步更新队列是如何工作的？ Vue事件处理如何绑定？@click和v-on有什么区别？ Vue中computed和watch的使用场景有什么区别？