Analyse sur la force du transfert de valeur entre les composants Vue

Lorsque nous commençons avec Vue, nous devons mentionner les composants. Dans certains cas, les composants doivent se transmettre des valeurs. Par exemple, le composant parent doit transmettre des valeurs au composant enfant et au composant enfant. Le composant enfant doit transmettre la valeur au composant parent. Ensuite, utilisez une force pour élaborer.

Effet :

Nous voulons obtenir un tel effet après avoir saisi du texte dans la zone de saisie et cliqué sur le bouton Soumettre, le contenu d'entrée correspondant apparaîtra ci-dessous. Si vous cliquez sur quelque chose, le contenu disparaît.

Comme indiqué ci-dessous, par exemple, lorsque nous cliquons sur 2, 2 disparaîtra

Analyse :

1. Tout d'abord, nous allons obtenir le contenu d'entrée, collecter tout le contenu d'entrée dans un tableau et boucler les données dans

. Étant donné que

a la même structure, nous pouvons transformer

en un composant. Le tableau se trouve dans la couche parent et le composant

le composant enfant, cela signifie que le composant parent transmet les valeurs aux composants enfants et transmet les données aux composants enfants.

2. Cliquez sur

une option et l'option disparaîtra. Ensuite, le composant

indiquera au composant parent vers le haut, lequel est actuellement cliqué et laquelle des données du tableau de la couche parent doit être supprimée. Il s'agit du sous-composant auquel la valeur est transmise. le composant parent.

<div id="root">
        
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
        
        <ul>
            <todo-item v-bind:content="item" 
                       v-bind:index="index" 
                       v-for="(item,index) in list"
                       @delete="handleItemDelete"
            ></todo-item>
        </ul>
    </div>

    <script>

        var TodoItem={
            props:[&#39;content&#39;,&#39;index&#39;],
            template:"<li @click=&#39;handleItemClick&#39;>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit(&#39;delete&#39;,this.index);
                }
            }
        }

        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            components:{
                &#39;TodoItem&#39;:TodoItem
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1);
                }
            }
        })
    </script>

Grâce au code, il n'est pas difficile de constater que le principal moyen pour les composants enfants de transmettre des valeurs aux composants parents est ici :

this.$emit('delete',this.index);

De plus, il devrait Notez que dans Vue, tout ce qui commence par $ est appelé propriétés ou méthodes d'instance vue. En plus de cela, vous devez également faire attention à certaines abréviations, telles que Submit bouton> et Soumettre

Recommandations associées : "Tutoriel JavaScript avancé"

Ce qui précède est l'analyse de la force du transfert de valeur entre les composants de Vue Promotion et augmentation de salaire, tout le monde, allez. !

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!