VUE3 development basics: using extends to inherit components

Vue is currently one of the most popular front-end frameworks, and VUE3 is the latest version of the Vue framework. Compared with VUE2, VUE3 has higher performance and a better development experience, and has become the first choice of many developers. . In VUE3, using extends to inherit components is a very practical development method. This article will introduce how to use extends to inherit components.

1. What is extends?

In Vue, extends is a very practical attribute. It can be used for child components to inherit the options of the parent component. For example, a template is defined in the parent component and passed through the extends attribute. If given to a subcomponent, the template can be used directly in the subcomponent without redefining it. This inheritance method can realize code reuse, reduce the amount of code, and improve development efficiency.

2. How to use extends?

First, we need to define a parent component, define a template, and save it as a separate file, such as HelloWorld.vue:

<template>
  <div>
    <h1 id="Hello-name">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>

In the parent component, we The template needs to be passed to the child component through the extends attribute, and the defined template is saved as a Mixins.js file, for example:

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

The HelloWorld here is the component name we defined in the parent component.

Next, we need to introduce Mixins.js into the child component, and use extends to inherit the parent component options and save it as a separate file, such as 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>

Use The mixins attribute imports Mixins.js and uses the component in the template. Finally, we need to render the sub-component App.vue into the root component of the Vue application, for example:

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

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

3. Summary

Using extends to inherit components is a very practical Development methods can help us achieve code reuse and improve development efficiency. In VUE3, the use of the extends attribute is very simple. You only need to define the template and inheritance relationship in the parent component and child component. I hope this article can be helpful to developers and make them more comfortable in using VUE3 development.

The above is the detailed content of VUE3 development basics: using extends to inherit components. For more information, please follow other related articles on the PHP Chinese website!