Bases du développement VUE3 : utilisation d'extensions pour hériter des composants

Vue est actuellement l'un des frameworks front-end les plus populaires, et VUE3 est la dernière version du framework Vue. Par rapport à VUE2, VUE3 a des performances plus élevées et une meilleure expérience de développement, et est devenu le choix de nombreux développeurs. Premier choix. Dans VUE3, utiliser extends pour hériter de composants est une méthode de développement très pratique. Cet article explique comment utiliser extends pour hériter de composants.

1. extendsQu'est-ce que c'est ?

Dans Vue, extends est un attribut très pratique. Il peut être utilisé pour les composants enfants pour hériter des options du composant parent. Par exemple, un modèle est défini dans le composant parent et. passé l'attribut extends. Transmettez-le au composant enfant, et le modèle peut être utilisé directement dans le composant enfant sans le redéfinir. Cette méthode d'héritage peut réaliser la réutilisation du code, réduire la quantité de code et améliorer l'efficacité du développement.

2. Comment utiliser les extensions ?

Tout d'abord, nous devons définir un composant parent, définir un modèle et l'enregistrer dans un fichier séparé, tel que 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>

In Dans le composant parent, nous devons transmettre le modèle au composant enfant via l'attribut extends, et enregistrer le modèle défini en tant que fichier Mixins.js, par exemple :

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

Le HelloWorld voici ce que nous avoir dans le composant parent Le nom du composant défini.

Ensuite, nous devons introduire Mixins.js dans le composant enfant et utiliser extends pour hériter de l'option du composant parent et l'enregistrer dans un fichier séparé, tel que 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>

# 🎜🎜#Utilisez l'attribut mixins pour introduire Mixins.js et utilisez le composant dans le modèle. Enfin, nous devons restituer le sous-composant App.vue dans le composant racine de l'application Vue, par exemple : #Utiliser étend l'héritage Les composants sont une méthode de développement très pratique qui peut nous aider à réutiliser le code et à améliorer l'efficacité du développement. Dans VUE3, l'utilisation de l'attribut extends est très simple. Il vous suffit de définir le modèle et la relation d'héritage dans le composant parent et le composant enfant. J'espère que cet article pourra être utile aux développeurs et les rendre plus à l'aise dans l'utilisation du développement VUE3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!