詳解vue 數(shù)據(jù)傳遞的方法

組件（Component）是 Vue.js 最強(qiáng)大的功能。組件可以封裝可重用的代碼，通過傳入對象的不同，實現(xiàn)組件的復(fù)用，但組件傳值就成為一個需要解決的問題。

1.父組件向子組件傳值

組件實例的作用域是孤立的。這意味著不能在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的props選項。

子組件：

子組件需要從父組件獲取 logo 的值，就需要使用 props: [‘logo']

父組件：

2.子組件向父組件傳值

子組件主要通過事件傳遞數(shù)據(jù)給父組件。

子組件：

其中 transferUser 是一個自定義的事件，this.username 將通過這個事件傳遞給父組件 。

父組件：

getUser 方法中的參數(shù) msg 就是從子組件傳遞過來的參數(shù) username

3.路由傳值

使用時，在生命周期created賦值。

4.通過localStorage或者sessionStorage來存儲數(shù)據(jù)

5.Vuex

在應(yīng)用復(fù)雜時，推薦使用vue官網(wǎng)推薦的vuex。

https://vuex.vuejs.org/zh-cn/getting-started.html

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com