我們要實現(xiàn)一個目標(biāo): 在A組件(子組件)中操作一個列表氢橙,進(jìn)而在B組件中這個列表對應(yīng)顯示也發(fā)生變化检诗。
首先匈仗,需要明確,我們是把A組件作為一個對象逢慌,來包裝數(shù)據(jù)悠轩,屬性和事件。組件之間的傳值可以使用props
列表來實現(xiàn)攻泼。
如下所示火架,我們在TODOItem這個組件中,定義幾個用于傳遞的屬性值:content, index
忙菠。并使用一個方法handleDelete
來觸發(fā)傳值的操作何鸡。在事件中, 使用$emit
實現(xiàn)調(diào)用父組件的@delete
標(biāo)簽標(biāo)注的父組件方法牛欢。
子組件中定義屬性和事件
在父組件中定義一個將要被子組件調(diào)用的方法handleDelete
骡男,這個方法有一個參數(shù)index
,后續(xù)可以接收子組件傳來的值傍睹。
父組件中定義方法接收子組件傳來的值
在父組件中洞翩,使用子組件并獲取子組件傳值的方法如下所示:
image.png
父組件中使用的todo-list 組件,具有之前定義的屬性
content
和index
屬性焰望。使用的時候需要以冒號開頭骚亿,而刪除事件則通過標(biāo)簽@delete
傳遞參數(shù)調(diào)用了子組件中的handleDelete事件,進(jìn)而把屬性傳遞給了父組件的刪除方法的參數(shù)熊赖。