Vue組件間之間傳值實力分析-js教程-PHP中文網

Vue組件間之間傳值實力分析

王雪芹

發布： 2020-08-12 11:58:35

原創

1502 人瀏覽過

在我們入門Vue的時候，不得不提到元件，在某些情況下，元件間需要互相傳值，例如父元件需要向子元件傳值，子元件需要向父元件傳值，那麼下面用一個實力來詳細說明。

效果：

我們想要實現這樣一個效果，在輸入框輸入文字點擊提交按鈕後，下面會出現對應的輸入內容。如果點擊某個內容，那麼這個內容就消失。

如下圖，例如我們在點擊2的時候，2就會消失

Vue組件間之間傳值實力分析

分析：

## ###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>

登入後複製

###透過程式碼我們不難發現，子元件向父元件傳值主要在這裡：######

this.$emit(&#39;delete&#39;,this.index);

登入後複製

###另外需要注意到，在Vue中以$開頭的都叫做vue的實例屬性或方法，除此之前還需要注意有一些簡寫，例如和

以上是Vue組件間之間傳值實力分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！