Comment passer plusieurs paramètres dans vue

Vue est un framework JavaScript populaire pour créer des applications Web et des interfaces utilisateur. Dans Vue, nous devons souvent transmettre des paramètres pour effectuer diverses opérations, telles que le rendu de composants, l'appel de méthodes, etc. Cet article explique comment transmettre plusieurs paramètres dans Vue.

Dans Vue, nous pouvons transmettre des paramètres aux sous-composants via Props. Les accessoires sont un moyen de communiquer entre les composants. Voici un exemple :

<script><br>importer ChildComponent depuis './ChildComponent.vue';</p> <p> export default {<br> composants : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">ChildComponent</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p>},<br> data() {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return {   value1: 'some value',   value2: 123 }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>}<br>}<br></script>

Dans cet exemple, nous avons un composant parent avec deux valeurs : valeur1 et valeur2. Nous voulons transmettre ces valeurs au ChildComponent en tant que Props. Afin de transmettre plusieurs paramètres, nous pouvons utiliser deux points (:) pour lier chaque paramètre à une propriété du composant.

Cependant, si nous voulons transmettre plusieurs paramètres, la transmission de Props nécessite de lier chaque paramètre manuellement, ce qui peut être gênant. Heureusement, Vue propose un autre moyen de transmettre plusieurs paramètres : transmettre des paramètres via des objets. T & lt; modèle & gt;

& lt; div & gt;

<child-component v-bind="props"></child-component>

& lt;/div & lt; .vue' ;
export default {

Components : {

ChildComponent

},

data() {

return {
  props: {
    prop1: 'some value',
    prop2: 123
  }
}

}

}

Dans cet exemple, nous utilisons la directive v-bind pour passer les accessoires s'opposent au composant ChildComponent. L'avantage est que nous n'avons besoin de conserver qu'un seul objet pour transmettre plusieurs paramètres au lieu de lier chaque paramètre manuellement. De plus, nous pouvons facilement modifier ces paramètres dans le composant parent sans modifier le composant ChildComponent.

En plus des Props, Vue fournit également un mécanisme d'événements pour transmettre des données. Nous pouvons utiliser la méthode $emit pour déclencher un événement dans le composant enfant et écouter l'événement dans le composant parent pour recevoir des données.

<script><p>export par défaut {<br> méthodes : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">sendData() {   this.$emit('send-data', {     prop1: 'some value',     prop2: 123   }); }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>}<br>}</p>& lt;/ script&gt ;<p><br>Dans cet exemple, nous déclenchons l'événement send-data dans le composant enfant et transmettons l'objet de données au composant parent. Dans le composant parent, nous pouvons écouter l'événement via la directive v-on et recevoir l'objet de données dans la fonction de rappel. T & lt; modèle & gt; <br> & lt; div & gt; </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;child-component @send-data=&quot;handleData&quot;&gt;&lt;/child-component&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> & lt;/div & lt; .vue' ;<p><br>export default {<br> Composants : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">ChildComponent</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p>},</p> méthodes : {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">handleData(data) {   console.log(data.prop1);   console.log(data.prop2); }</pre><div class="contentsignin">Copier après la connexion</div></div> <br>}}<p></script>

En bref, la méthode pour passer plusieurs paramètres dans Vue n'est pas compliquée . Nous pouvons utiliser des accessoires et des objets pour transmettre des paramètres, ou utiliser des déclencheurs $emit et écouter les événements entre les composants enfants et les composants parents. La méthode que vous choisissez dépend de vos besoins spécifiques, mais ce sont des fonctionnalités très utiles de 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!