溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vuejs如何傳遞數據

發布時間:2021-09-08 14:39:04 來源:億速云 閱讀:155 作者:小新 欄目:編程語言

這篇文章將為大家詳細講解有關vuejs如何傳遞數據,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

傳遞方法:1、父組件利用props向子組件傳遞數據;2、子組件通過事件傳遞數據給父組件;3、利用路由傳數據;4、利用localStorage或sessionStorage存儲數據,然后使用getItem獲取數據;5、利用Vuex來傳遞數據。

本教程操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

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

1.父組件向子組件傳值

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

子組件

vuejs如何傳遞數據

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

vuejs如何傳遞數據

父組件

vuejs如何傳遞數據

vuejs如何傳遞數據

2.子組件向父組件傳值

子組件主要通過事件傳遞數據給父組件。

子組件

vuejs如何傳遞數據

vuejs如何傳遞數據

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

父組件

vuejs如何傳遞數據

vuejs如何傳遞數據

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

3.路由傳值

vuejs如何傳遞數據

vuejs如何傳遞數據

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

vuejs如何傳遞數據

4. 通過localStorage或者sessionStorage來存儲數據

vuejs如何傳遞數據

5.Vuex

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

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

vuejs如何傳遞數據

關于“vuejs如何傳遞數據”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女