Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse der Stärke des Werttransfers zwischen Vue-Komponenten

王雪芹
Freigeben: 2020-08-12 11:58:35
Original
1489 Leute haben es durchsucht

在我们入门Vue的时候,不得不提到组件,在某些情况下,组件间需要互相传值,比如父组件需要向子组件传值,子组件需要向父组件传值,那么下面用一个实力来详细说明。

效果:

我们想实现这样一个效果,在输入框输入文字点击提交按钮后,下面会出现对应的输入内容。如果点击某个内容,那么这个内容就消失。

如下图,比如我们在点击2的时候,2就会消失

Analyse der Stärke des Werttransfers zwischen Vue-Komponenten

分析:

1、首先我们会获取到input的输入内容,把所有输入内容都集合成一个数组,在

  • 循环数据。因为
  • 都是相同的结构,我们可以把
  • 做成一个组件,数组是在父层,定义的
  • 组件是子组件,这就是父组件向子组件传值,把数据传给子组件。

    2、点击

  • 某个选项,该选项会消失。那么
  • 组件会向上通知父组件,当前点击的是哪个,需要父层的数组数据中哪个去掉,这就是子组件向父组件传值。
    <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>
    Nach dem Login kopieren

    通过代码我们不难发现,子组件向父组件传值主要在这里:

    this.$emit(&#39;delete&#39;,this.index);
    Nach dem Login kopieren

    另外需要注意到,在Vue中以$开头的都叫做vue的实例属性或者方法,除此之前还需要注意有一些简写,比如 > 是相同的效果。

    相关推荐:《javascript高级教程

    以上就是Vue组件间之间传值实力分析,升职加薪,大家加油! p>

  • Das obige ist der detaillierte Inhalt vonAnalyse der Stärke des Werttransfers zwischen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage