詳解vue 數(shù)據(jù)傳遞的方法
更新時間：2018年04月19日 16:13:33 作者：wxx1992816
這篇文章給大家介紹了vue數(shù)據(jù)傳遞的方法，包括，父組件向子組件傳值 ，子組件向父組件傳值 ，路由傳值等多種方法，需要的朋友參考下
組件（Component）是 Vue.js 最強大的功能。組件可以封裝可重用的代碼，通過傳入對象的不同，實現(xiàn)組件的復(fù)用，但組件傳值就成為一個需要解決的問題。
1.父組件向子組件傳值
組件實例的作用域是孤立的。這意味著不能在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的props選項。
子組件：
![子組件需要從父組件獲取 logo 的值，就需要使用 props: ['logo']](http://img.jbzj.com/file_images/article/201804/2018041916044820.png)
子組件需要從父組件獲取 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。
相關(guān)文章
這篇文章主要為大家介紹了vue實現(xiàn)前端按鈕組件權(quán)限管理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue3中利用Export2Excel將數(shù)據(jù)導(dǎo)出為excel表格
這篇文章主要給大家介紹了關(guān)于vue3中利用Export2Excel將數(shù)據(jù)導(dǎo)出為excel表格的相關(guān)資料,最近項目需要前端來導(dǎo)出Excel操作,所以給大家總結(jié)下,需要的朋友可以參考下2023-09-09
Vue 實現(xiàn) Tab切換實現(xiàn)的場景很多，比如，利用vue-router、利用第三方插件、利用組件等等.本文使用組件來實踐tab選項卡2017-03-03
這篇文章主要為大家詳細介紹了vue雙花括號的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue在IIS服務(wù)器部署后路由無法跳轉(zhuǎn)
在IIS服務(wù)器上部署Vue項目時,可能會遇到路由無法正常跳轉(zhuǎn)的問題,解決方法有兩種,下面就來具體介紹一下解決方法,感興趣的可以了解一下2024-10-10
這篇文章主要介紹了vue3利用store實現(xiàn)記錄滾動位置的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要給大家介紹了關(guān)于Vue.js實例方法之生命周期的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存詳解
Vue3中的keep-alive組件用于緩存頁面,以便在切換頁面時保留其狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存的相關(guān)資料,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細用法以及分類介紹，有興趣的朋友學習參考下吧。2017-12-12
解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項
這篇文章主要介紹了解決vite項目Uncaught Syntaxerror:Unexpected token＞vue項目上線白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03