Le composant parent vue modifie les propriétés des composants enfants

Dans Vue, la communication de données entre les composants parent et enfant est une exigence très courante. Le composant parent peut transmettre des données au composant enfant via des accessoires, et le composant enfant peut informer le composant parent vers le haut des modifications via des événements. Cependant, dans certains cas, nous devons modifier certaines propriétés du composant enfant dans le composant parent, ce qui nécessite l'utilisation de $refs pour faire fonctionner le composant enfant.

Dans Vue, $refs est une référence qui peut accéder à des variables ou des méthodes à l'intérieur du composant enfant dans le composant parent. Grâce à $refs, nous pouvons obtenir l'instance du sous-composant et appeler ses méthodes ou modifier ses propriétés.

Ci-dessous, nous utilisons un exemple pour voir comment modifier les propriétés d'un composant enfant via le composant parent.

Tout d'abord, nous devons définir un sous-composant qui a un nom d'attribut et fournir une méthode setName pour définir la valeur de l'attribut.

<template>
  <div>
    <p>子组件的name属性为：{{ name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Subcomponent',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    setName(value) {
      this.name = value;
    }
  }
}
</script>

Ensuite, introduisez le composant enfant dans le composant parent et utilisez le composant enfant dans le modèle. Nous devons également définir l'attribut ref sur la balise du composant enfant pour référencer l'instance du composant enfant dans le composant parent.

<template>
  <div>
    <button @click="changeName">更改子组件name属性值</button>
    <subcomponent ref="mySubcomponent" :name="name"></subcomponent>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    Subcomponent
  },
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    changeName() {
      this.$refs.mySubcomponent.setName('React');
    }
  }
}
</script>

Dans le composant parent, nous définissons une méthode changeName, qui obtient l'instance du sous-composant via $refs et appelle sa méthode setName pour changer l'attribut name du sous-composant en React. De cette façon, après avoir cliqué sur le bouton, vous pouvez voir sur la page que l'attribut name du sous-composant a été modifié.

Dans le processus de développement de projet lui-même, nous devons souvent modifier certaines propriétés des composants enfants via les composants parents. À cette époque, $refs deviendra un outil très important pour nous. Lorsque les sous-composants doivent répondre à certains événements, nous pouvons utiliser des événements pour y parvenir. Utilisons ensuite un petit exemple pour mieux comprendre le mécanisme par lequel les composants parents modifient les propriétés des composants enfants.

<template>
  <div>
    <button @click="changeName">更改子组件name属性值</button>
    <subcomponent ref="mySubcomponent" :name="name" @changeName="handleChangeName"></subcomponent>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    Subcomponent
  },
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    changeName() {
      this.$refs.mySubcomponent.setName('React');
    },
    handleChangeName(newName) {
      this.name = newName;
    }
  }
}
</script>

Dans cet exemple, nous avons ajouté un écouteur d'événement @changeName sur la balise du composant enfant et défini une méthode handleChangeName dans le composant parent pour répondre à l'événement. Lorsque $emit('changeName', newName) est appelé dans le composant enfant, la méthode handleChangeName dans le composant parent sera appelée et le nouveau nom transmis sera attribué à l'attribut name. De cette façon, vous pouvez également voir la modification de la valeur de l'attribut de nom du sous-composant en temps réel sur la page.

En général, dans Vue, il est très pratique d'obtenir l'instance du sous-composant via $refs, et de modifier ses propriétés ou d'appeler ses méthodes. En utilisant les événements ensemble, nous pouvons réaliser la fonction du composant parent en modifiant les propriétés du composant enfant, apportant ainsi plus de possibilités d'interaction entre les pages.

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!