這篇文章給大家分享的是有關vue組件中如何實現(xiàn)數(shù)據(jù)傳遞的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站從2013年開始,先為阿克陶等服務建站,阿克陶等地企業(yè),進行企業(yè)商務咨詢服務。為阿克陶企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。具體如下:
1、props:父組件 -->傳值到子組件
app.vue是父組件 ,其它組件是子組件,把父組件值傳遞給子組件需要使用 =>props
在父組件(App.vue)定義一個屬性(變量)sexVal = '男' 把該值傳遞給 子組件(B.vue),如下:
App.vue
<template> <div id="app"> <!--<router-view></router-view>--> <parentTochild :sex="sexVal"></parentTochild> </div> </template> <script> import parentTochild from './components/B' export default { name: 'app', data: function () { return { sexVal:"女" } }, methods: { }, components: { parentTochild } } </script>
B.vue
<template> <div class="b_class"> <!--外邊只允許有一個跟元素--> <p>父組件傳值給子組件</p> <p>姓名:{{name}}</p> <p>年齡:{{age}}</p> <p>sex:{{sex}}</p> </div> </template> <script> export default { data: function () { return { name: 'zs', age: 22 } }, props:['sex'] } </script>
tips:
在父傳值給子組件使用屬性值:props; 理解成 “ 中介” 父組件綁定傳遞屬性值(:sex="sexval") 子組件 獲取屬性值 props['sex'] 會添加到data 對象中
2、$emit:子組件 -->傳值到父組件
在B.vue 子組件添加一個點擊事件為例子
@click="sendMs
<input type="button" @click="sendMsg" value="子組件值傳父組件">
在調(diào)用該函數(shù)后使用$emit方法傳遞參數(shù) (別名,在父組件作為事件名稱, 值);
methods: { sendMsg: function () { this.$emit('childMsg', '值來自---子組件值') } }
App.vue
在父組件中 使用該別名(作為事件名使用),調(diào)用方法 childEvent 返回子組件傳過來的值
<p>{{message}}</p> <!--<router-view></router-view>--> <parentTochild :sex="sexVal" @childMsg = "childEvent"></parentTochild>
data: function () { return { sexVal: "女", message: '' } }, methods: { childEvent: function (msg) { this.message = msg; // msg 來自子組件 } }
點擊 “按鈕”值會傳到 父組件中。 組件之間不能互相傳值。
感謝各位的閱讀!關于“vue組件中如何實現(xiàn)數(shù)據(jù)傳遞”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
本文題目:vue組件中如何實現(xiàn)數(shù)據(jù)傳遞-創(chuàng)新互聯(lián)
文章URL:http://bm7419.com/article24/cdehce.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、微信公眾號、品牌網(wǎng)站建設、App設計、域名注冊、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)