Combien y a-t-il de façons de transmettre des valeurs dans Vue ?

Vue est un framework JavaScript populaire couramment utilisé pour créer des interfaces utilisateur et des applications Web d'une seule page. Dans les applications Vue, le transfert de données entre les composants est très important. Vue fournit une variété de méthodes de transmission de valeurs pour partager des données entre composants. Cet article présentera en détail la méthode de transmission de valeurs dans Vue.

1. props

props est l'une des méthodes de transmission de valeurs les plus couramment utilisées dans Vue, et elle est très facile à comprendre. Il permet aux composants parents de transmettre des données aux composants enfants. Dans Vue, les composants peuvent également être utilisés comme des balises HTML. Vous trouverez ci-dessous un exemple montrant comment transmettre des données à l'aide d'accessoires.

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

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, world!',
    }
  },  
}
</script>

Dans cet exemple, nous utilisons la syntaxe :title="message" pour transmettre le message de données du composant parent au composant enfant en tant qu'accessoire. Dans le composant enfant, nous pouvons recevoir cet accessoire via le mot-clé props. :title="message"将父组件中的数据message作为一个prop传递给child-component子组件。在子组件中，我们可以通过props关键字接收这个prop。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title'],
}
</script>

在子组件中通过props: ['title']接收了这个prop并将其在模板中展示。

2. Emit

emit可以让子组件向父组件传递数据。为了使用emit，你需要在子组件中使用$emit方法触发一个自定义事件，并在父组件中监听这个事件。下面是一个使用emit传递数据的实例。

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
      this.$emit('increment', this.count)
    },
  },
}
</script>

在这个示例代码中，当点击按钮之后，会调用increment方法并调用this.$emit方法触发自定义事件'increment'。事件中我们可以携带数据，这里我们将count作为选项传递给父组件。

<template>
  <div>
    <child-component @increment="incrementCount"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      total: 0,
    }
  },
  methods: {
    incrementCount(count) {
      this.total = count
    },
  },
}
</script>

在父组件的模板中，我们使用了语法@increment="incrementCount"监听子组件中自定义的事件，当子组件触发'increment'事件时，我们调用incrementCount方法来更新父组件的状态。

3. Vuex

Vuex是一个专为Vue应用程序开发的状态管理模式。它提供了一个全局状态管理中心，并使用了一些常见的状态管理模式，如state、getters、mutations、actions等。

使用Vuex的好处是，它提供了一个中央存储库来传递数据，可以让应用程序的状态更加可控和可维护。在Vuex中，状态可以通过store传递给组件。

下面是一个简单的Vuex示例，在store中我们定义了一个变量count，并暴露了一个increment的mutation，它可以更新这个count状态。

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    },
  },
})

export default store

在组件中我们可以使用$store来访问Vuex存储库中的状态和操作，下面是一个使用Vuex来更新状态的例子。

<template>
  <div>
    <h1>{{ $store.state.count }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment', 1)
    },
  },
}
</script>

在这个代码示例中，当点击按钮时，会调用increment方法并调用this.$store.commit方法将数据传递给Vuex存储库中的increment mutation来更新状态。

4. Provide / Inject

Provide / Inject提供了一种组件通信方式，允许您在链中的所有后代组件之间轻松共享数据。它允许父组件提供数据，并让后代组件使用数据。

在父组件中，我们通过provide属性提供数据。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      message: 'Hello from parent component.',
    }
  },
}
</script>

在这个示例中，我们使用provide来提供数据message，并传递给了子组件。在子组件中，我们可以使用inject来注入这个数据。

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

<script>
export default {
  inject: ['message'],
}
</script>

在这个示例中，我们使用injectrrreee

Reçoit cet accessoire via props: ['title'] dans le composant enfant et l'affiche dans le modèle.

Emit
🎜emit permet aux composants enfants de transmettre des données aux composants parents. Pour utiliser submit, vous devez utiliser la méthode $emit dans le composant enfant pour déclencher un événement personnalisé et écouter cet événement dans le composant parent. Ce qui suit est un exemple d'utilisation d'emit pour transmettre des données. 🎜rrreee🎜Dans cet exemple de code, lorsque vous cliquez sur le bouton, la méthode increment sera appelée et la méthode this.$emit sera appelée pour déclencher l'événement personnalisé ' incrément'. Nous pouvons transporter des données dans l'événement, ici nous transmettons le comptage en option au composant parent. 🎜rrreee🎜Dans le modèle du composant parent, nous utilisons la syntaxe @increment="incrementCount" pour écouter les événements personnalisés dans le composant enfant Lorsque le composant enfant déclenche l'événement 'increment', nous. appelez la méthode incrementCount pour mettre à jour l'état du composant parent. 🎜
🎜Vuex🎜🎜🎜Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue. Il fournit un centre de gestion d'état global et utilise certains modèles de gestion d'état courants, tels que l'état, les getters, les mutations, les actions, etc. 🎜🎜L'avantage d'utiliser Vuex est qu'il fournit un référentiel central pour transférer les données, ce qui peut rendre l'état de l'application plus contrôlable et maintenable. Dans Vuex, l'état peut être transmis aux composants via le magasin. 🎜🎜Ce qui suit est un exemple simple de Vuex. Dans le magasin, nous définissons un nombre de variables et exposons une mutation de incrément, qui peut mettre à jour l'état du nombre. 🎜rrreee🎜Dans le composant, nous pouvons utiliser $store pour accéder à l'état et aux opérations dans le référentiel Vuex. Voici un exemple d'utilisation de Vuex pour mettre à jour l'état. 🎜rrreee🎜Dans cet exemple de code, lorsque vous cliquez sur le bouton, la méthode increment est appelée et la méthode this.$store.commit est appelée pour transmettre les données au Dépôt Vuex. Incrémentez la mutation pour mettre à jour l'état. 🎜
🎜Provide/Inject🎜🎜🎜Provide/Inject fournit une méthode de communication entre composants qui vous permet de partager facilement des données entre tous les composants descendants de la chaîne. Il permet aux composants parents de fournir des données et aux composants descendants de consommer les données. 🎜🎜Dans le composant parent, nous fournissons des données via l'attribut provide. 🎜rrreee🎜Dans cet exemple, nous utilisons provide pour fournir un message de données et le transmettre au composant enfant. Dans les composants enfants, nous pouvons utiliser inject pour injecter ces données. 🎜rrreee🎜Dans cet exemple, nous utilisons inject pour injecter les données du message fournies par le composant parent et les afficher dans le modèle. 🎜🎜Résumé🎜🎜Ce qui précède résume les quatre méthodes courantes de transmission de valeurs dans Vue : props, submit, Vuex et Provide/Inject. Chaque méthode de transmission de valeur a ses scénarios applicables et son utilisation standard. Comprendre ces méthodes de transfert de valeur vous aidera à mieux comprendre le transfert de données entre les composants Vue. Nous pouvons sélectionner et combiner ces méthodes de transfert de valeur en fonction des besoins réels pour réaliser le partage de données dans les applications 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!