vue refs modifier les propriétés

Vue est un framework progressif pour la création d'interfaces utilisateur. Il est simple, flexible et efficace, et est largement utilisé dans le développement front-end. Parmi eux, refs est une fonctionnalité importante fournie par Vue, qui permet aux développeurs d'accéder directement aux éléments DOM et aux instances de composants pour modifier des propriétés ou appeler des méthodes. Dans cet article, nous explorerons les techniques associées de modification des propriétés des références Vue pour aider les lecteurs à mieux maîtriser cette fonction importante.

1. Introduction à Vue Refs

Dans Vue, refs est un attribut spécial utilisé pour accéder aux composants ou aux éléments DOM. Il a deux façons d'écrire :

1. Forme de chaîne :

   <template>
     <div ref="myRef"></div>
   </template>

2. Forme de fonction :

   <template>
     <div ref="myRef"></div>
   </template>
   
   <script>
   export default {
     methods: {
    log() {
      console.log(this.$refs.myRef);
    }
     }
   }
   </script>

   refs peut être utilisé pour accéder aux instances de composant, aux éléments DOM ou aux sous-composants. La méthode est généralement déclarée dans le modèle, puis accessible via this.$refs dans le code JavaScript du composant. Il convient de noter que les références ne peuvent être définies qu'après le rendu du composant, il est donc recommandé de l'utiliser dans la fonction de cycle de vie montée.

2. Modifier les attributs de Vue Refs

1. Modifier les attributs des éléments DOM

#🎜 🎜 #Vous pouvez modifier directement les attributs des éléments DOM via des références, par exemple en modifiant l'espace réservé de la zone de texte :

<template>
  <div>
    <input type="text" ref="myInput">
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$refs.myInput.placeholder = '请输入用户名';
    }
  }
</script>

Lorsque le rendu du composant est terminé, la fonction de cycle de vie montée sera appelée, et vous pouvez utiliser des références dans cette fonction pour modifier les propriétés des éléments DOM.

Modification des attributs du composant

refs peut également être utilisé pour modifier les attributs du composant, qui sont obtenus grâce à cela.$refs in le code JavaScript du composant. Instance du composant, puis vous pouvez ajouter, supprimer, modifier, vérifier, etc. des attributs sur le composant :

<template>
  <div>
    <my-component ref="myComp"></my-component>
    <button @click="changeText">点击修改</button>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'
  export default {
    components: {MyComponent},
    methods: {
      changeText() {
        this.$refs.myComp.text = '新的文本内容';
      }
    }
  }
</script>

Dans l'exemple ci-dessus, nous appelons la méthode changeText via le cliquez sur l'événement du bouton, puis utilisez les références pour obtenir l'instance du composant, modifiez l'attribut texte du composant.

Il est à noter que si vous souhaitez modifier les propriétés du composant, vous devez vous assurer que la propriété est modifiable, c'est-à-dire qu'elle n'est pas en lecture seule (comme les accessoires). Si vous souhaitez modifier les propriétés dans les accessoires, il est recommandé d'appeler la méthode $emit pour demander au composant parent d'apporter des modifications.

Appel de méthodes de composants

En plus de pouvoir modifier les propriétés des composants, les références peuvent également être utilisées pour appeler des méthodes de composants. Dans le code JavaScript du composant, vous pouvez obtenir l'instance du composant via $refs, puis appeler la méthode du composant :

<template>
  <div>
    <my-component ref="myComp"></my-component>
    <button @click="callMyMethod">调用组件方法</button>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'
  export default {
    components: {MyComponent},
    methods: {
      callMyMethod() {
        this.$refs.myComp.myMethod();
      }
    }
  }
</script>

Dans l'exemple ci-dessus, nous avons appelé la méthode myMethod dans le composant my-component . Vous devez vous assurer que les méthodes sont publiques, c'est-à-dire qu'elles sont définies dans les méthodes du composant.

Il convient de noter que l'appel des méthodes de composants peut non seulement être implémenté via des références, mais également via des événements, $emit, etc. Cependant, l'utilisation de références pour appeler des méthodes présente les avantages de la franchise et de la simplicité, et permet de mieux garantir la lisibilité et la maintenabilité du code.

3. Résumé

Vue Refs La modification des propriétés est l'une des fonctionnalités importantes du framework Vue. Elle peut être utilisée pour accéder aux instances de composants, aux éléments DOM ou aux sous-composants. modifier les propriétés ou appeler des méthodes, etc. Lorsque vous appliquez Vue Refs pour modifier des propriétés, vous devez faire attention à certains détails, tels que la lisibilité, la simplicité, le type de propriétés modifiées, les méthodes à appeler, etc. Grâce à l'explication de cet article, je pense que les lecteurs peuvent mieux maîtriser les compétences de modification des propriétés de Vue Refs et optimiser le développement des 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!