Techniques avancées pour la communication des composants dans Vue-Voir.js-php.cn

Techniques avancées pour la communication des composants dans Vue

PHPz

Libérer： 2023-07-17 22:57:08

original

1032 Les gens l'ont consulté

Techniques avancées pour la communication des composants dans Vue

Vue est un puissant framework JavaScript qui adopte un modèle de développement basé sur les composants, nous permettant de mieux organiser et gérer du code frontal complexe. Dans Vue, la communication entre les composants est un sujet très important. Dans cet article, nous explorerons quelques techniques avancées de communication entre composants dans Vue et fournirons des exemples de code correspondants.

1. Le composant parent communique avec les composants enfants

Props transfère des données

Props est le moyen le plus courant dans Vue pour les composants parents de transférer des données vers des composants enfants. En déclarant l'option props dans le composant enfant, nous pouvons transmettre des données en liant les propriétés dans le composant parent.

Voici un exemple simple :

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello, child component!'
    }
  }
}
</script>

Copier après la connexion

Dans le composant enfant, nous pouvons déclarer les données reçues via l'option props :

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Copier après la connexion

$attrs et $listeners

Parfois, nous pouvons rencontrer un problème. Le composant parent transmet trop de propriétés et nous devons uniquement transmettre ces propriétés à un élément spécifique du composant enfant. À l'heure actuelle, nous pouvons utiliser les attributs $attrs et $listeners fournis par Vue pour simplifier ce processus. $attrs和$listeners属性来简化这个过程。

<template>
  <div>
    <child-component v-bind="$attrs" v-on="$listeners"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

Copier après la connexion

在子组件中，我们可以直接使用继承的$attrs和$listeners属性：

<template>
  <div>
    <p>{{ $attrs.message }}</p>
    <button v-on="$listeners.click">Click me</button>
  </div>
</template>

<script>
export default {
  
}
</script>

Copier après la connexion

二、子组件向父组件通讯

$emit触发自定义事件

在Vue中，子组件可以通过$emit方法触发自定义事件，从而向父组件传递数据。

以下是一个示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, parent component!"
    }
  },
  methods: {
    sendMessage() {
      this.$emit('message', this.message);
    }
  }
}
</script>

Copier après la connexion

在父组件中，我们可以监听子组件触发的自定义事件，并在方法中处理传递的数据：

<template>
  <div>
    <child-component @message="receiveMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log("Received message from child component:", message);
    }
  }
}
</script>

Copier après la connexion

provide和inject

有时候，我们可能需要在组件树中的多层嵌套组件中进行通讯。Vue提供了provide和inject选项来实现这一需求。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, parent component!"
    }
  },
  provide() {
    return {
      sendMessage: this.sendMessage
    }
  },
  methods: {
    sendMessage() {
      this.$emit('message', this.message);
    }
  }
}
</script>

Copier après la connexion

在父组件中，我们使用inject

<template>
  <div>
    <child-component @message="receiveMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log("Received message from child component:", message);
    }
  },
  inject: ['sendMessage']
}
</script>

Copier après la connexion

Dans le composant enfant, nous pouvons utiliser directement les attributs hérités $attrs et $listeners :

rrreee

2. Le composant enfant communique avec le composant parent🎜🎜 🎜$emit déclenche des événements personnalisés🎜🎜🎜Dans Vue, les composants enfants peuvent déclencher des événements personnalisés via la méthode $emit pour transmettre des données au composant parent. 🎜🎜Voici un exemple : 🎜rrreee🎜Dans le composant parent, nous pouvons écouter les événements personnalisés déclenchés par le composant enfant et traiter les données transmises dans la méthode : 🎜rrreee🎜🎜provide et injecter🎜🎜🎜Parfois, nous pouvons Nécessite une communication entre plusieurs niveaux de composants imbriqués dans l’arborescence des composants. Vue fournit les options provide et inject pour répondre à cette exigence. 🎜rrreee🎜Dans le composant parent, nous utilisons l'option inject pour recevoir les données ou méthodes fournies par le composant enfant : 🎜rrreee🎜Cela termine l'article. Nous avons discuté de quelques techniques avancées de communication entre les composants dans. Vue et des exemples de code correspondants sont fournis. J'espère que ces conseils seront utiles à votre travail de développement Vue ! 🎜

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!