Introduction détaillée sur la façon de diviser les composants dans Vue

Avec le développement continu de la technologie front-end, Vue a reçu de plus en plus d'attention et est devenu l'un des frameworks les plus respectés en matière de développement front-end. L'efficacité de Vue et la technologie DOM virtuelle permettent une utilisation efficace dans le développement réel. La division dans Vue est une partie très importante de la division des composants de Vue. Cet article présentera en détail comment diviser les composants dans Vue.

1. Le concept de base des composants

Dans Vue, un composant fait référence à une instance Vue réutilisable, tout comme un élément personnalisé. Les composants peuvent accepter des accessoires sur la vue pour personnaliser la fonctionnalité de l'élément. Les composants contiennent des données et des méthodes et peuvent représenter une partie de la vue entière. Par exemple, un composant de panier d'achat peut représenter une partie de la vue globale de l'application. Les composants peuvent recevoir des données des composants parents et peuvent également envoyer des données aux composants parents.

2. Comment les composants sont divisés

Dans Vue, les composants peuvent être divisés en composants globaux et composants locaux.

• Composants globaux

Les composants globaux sont des composants qui peuvent être utilisés n'importe où. Ils sont enregistrés dans l'objet de configuration global de Vue. La portée de chaque instance de Vue contient des composants globaux. L'enregistrement de ce type de composant se fait via la méthode Vue.component(). De manière générale, les composants globaux ne sont utilisés que pour définir des fonctions globales, telles que la barre de navigation inférieure, le champ de recherche supérieur et d'autres composants communs. L'exemple de code est le suivant :

Vue.component('header-bar', {
  template: '<div>这是一个头部组件</div>'
})

• Composants locaux

Les composants locaux sont des composants qui ne peuvent être utilisés que dans un certain composant. Ils sont enregistrés dans une instance de Vue ou une instance de composant et ne peuvent être utilisés que dans le cadre de. l'instance. Un tel composant est enregistré en transmettant l'objet options du composant comme l'une des propriétés d'options du composant local. En général, les composants locaux peuvent définir leurs propres composants pour chaque page. Par exemple, si une page nécessite un composant spécifique, elle peut être définie comme composant local. L'exemple de code est le suivant :

var vm = new Vue({
  el: '#app',
  components: {
    'header-bar': {
      template: '<div>这是一个头部组件</div>'
    },
    'content-body': {
      template: '<div>这是一个内容组件</div>'
    }
  }
})

3. Méthodes de transfert de valeurs des composants

Il y aura une interaction et un transfert de données entre les composants Afin de transférer efficacement des données, il existe plusieurs méthodes de transfert de données dans les composants.

• Transmission de valeurs des composants parents aux composants enfants

La transmission de valeurs des composants parents aux composants enfants est un flux de données unidirectionnel, transmettant des données aux composants enfants via des accessoires. Dans Vue, les composants enfants déclarent leurs propres accessoires indépendants en tant que propriétés. L'exemple de code est le suivant :

Composant parent :

<template>
  <div>
    <h3>父组件</h3>
    <my-child :title="title" :content="content"></my-child>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '这是标题',
        content: '这是内容'
      }
    }
  }
</script>

Composant enfant :

<template>
  <div>
    <h3>子组件</h3>
    <p>{{title}}</p>
    <p>{{content}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      },
      content: {
        type: String
      }
    }
  }
</script>

• Le composant enfant transmet la valeur au composant parent

Le composant enfant transmet la valeur au composant parent via un événement personnalisé de du composant enfant au composant parent Flux de données unidirectionnel. Dans Vue, utilisez la méthode $emit() pour transmettre des événements et des données au composant parent. L'exemple de code est le suivant :

Composant parent :

<template>
  <div>
    <h3>父组件</h3>
    <my-child @child-click="childClickHandler"></my-child>
    <p>{{info}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        info: ''
      }
    },
    methods: {
      childClickHandler(val) {
        this.info = val
      }
    }
  }
</script>

Composant enfant :

<template>
  <div>
    <h3>子组件</h3>
    <button @click="clickHandler">点击我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      clickHandler() {
        this.$emit('child-click', '这是子组件的信息')
      }
    }
  }
</script>

Résumé

Le développement basé sur les composants dans Vue joue un très bon rôle dans le développement, la modification et la maintenance du projet. Dans le développement réel, une division raisonnable des composants et un transfert de données entre les composants en fonction des besoins sont des méthodes efficaces pour obtenir une bonne expérience de développement et une bonne composition en composants. L'utilisation de Vue pour le développement de composants divise l'ensemble de l'application en petites parties réutilisables, la rendant plus efficace et fiable.

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!