1. 程式人生 > >Vue資料傳遞的五種方法

Vue資料傳遞的五種方法

元件(Component)是 Vue.js 最強大的功能。元件可以封裝可重用的程式碼,通過傳入物件的不同,實現元件的複用,但元件傳值就成為一個需要解決的問題。

1.父元件向子元件傳值

元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。

子元件

子元件需要從父元件獲取 logo 的值,就需要使用 props: ['logo']

父元件

2.子元件向父元件傳值

子元件主要通過事件傳遞資料給父元件。

子元件

其中 transferUser 

是一個自定義的事件,this.username 將通過這個事件傳遞給父元件 

父元件

getUser 方法中的引數 msg 就是從子元件傳遞過來的引數 username

3.路由傳值

使用時,在生命週期created賦值。

4. 通過localStorage或者sessionStorage來儲存資料

5.Vuex

在應用複雜時,推薦使用vue官網推薦的vuex

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