Vue父子組件傳值面試這樣說就能夠了

父組件傳子組件的值正常都是從後端獲取的,官方推薦使用axios來進行先後端交互,使用 axios.get(),
由於axios返回的是Promise,因此直接用.then() 在裏面寫個接收函數接收返回值ret,ret的返回值就能夠
對應的賦值在在data裏面定義的kv值。將data裏面獲取到的值經過在template中的子組件標籤上經過v-bind:xxx = ''
這樣父組件的操做就完成了,而後再子組件中,經過props{list:Array}來接收從父組件傳過來的值,接受到的值就可在
子組件的template中使用。這樣就完成了父組件將數據傳輸到子組件的所有過程。

子組件傳父組件的值正常都是由事件決定的,這裏拿click舉例,當子組件上綁定被點擊事件觸發時,能夠在這個觸發事件的函數中
使用Vue自帶的this.$emit(‘父組件接收的事件名’,要傳輸的參數),這樣子組件就完成了。而後在父組件中的template裏的對應
子組件上經過@事件名 = ‘func’ 而後在父組件的method中補全這個func,這個func中將從子組件中穿過來的值賦值給父組件的data的
kv值,而後就得到到子組件中的傳過來的值了。父組件就能夠將這個值在template中使用。這樣就完成子組件向父組件中傳值的全過程。複製代碼
相關文章
相關標籤/搜索