您好,登錄后才能下訂單哦!
vue中怎么實(shí)現(xiàn)組件間參數(shù)傳遞,針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
舉例說(shuō)明
例如:element-ui組件庫(kù)中使用switch開(kāi)關(guān),有個(gè)屬性active-color是設(shè)置“打開(kāi)時(shí)”的背景色。change事件是觸發(fā)狀態(tài)的事件。
<el-switch v-model="value" :active-color="activecolor" @change="touchSwitch"> </el-switch> <script> export default { data() { return { value: true, activecolor: '#13ce66' } }, methods: { touchSwitch () { // 這里入方法 } } }; </script>
分析代碼
我們分析上面的代碼
首先我們可以看到active-color是將特定的數(shù)據(jù)傳給組件,也就是父?jìng)髯咏M件。
其次是@change雖然監(jiān)聽(tīng)的是改變事件,但是語(yǔ)法糖依然是$emit,什么emit我們?cè)谝院蟮奈恼轮袝?huì)講到,就是“拋出事件”。
這就分為組件的最基本功能:
?數(shù)據(jù)進(jìn)
?事件出
那組件的使用我們知道了,通過(guò)active-color傳入?yún)?shù),通過(guò)@來(lái)接收事件。
所以,我們來(lái)探究一下組件的內(nèi)部結(jié)構(gòu)是什么樣的?
我寫(xiě)了一個(gè)小模型,是一個(gè)顯示標(biāo)題的小按鈕,通過(guò)div包裹。
<!-- type-box.vue --> <template> <div class="box" @click="ai_click(title)">{{title}}</div> </template> <script> export default { name: 'type-box', props: { title: { type: String, default: () => '' } }, methods: { ai_click (title) { this.$emit('ai_click', title) } } } </script> <style scoped> .box{ width: 250px; height: 100px; margin: 10px; border-radius: 10px; background-color: #3a8ee6; color: white; font-size: 25px; line-height: 100px; text-align: center; cursor: pointer; } </style>
使用方法:
<!-- 父組件使用 --> <template> <div> <type-box title="演示盒子" @ai_click=“touch”></type-box> </div> </template> <script> import typeBox from './type-box' export default { components: { typeBox }, methods: { touch (data) { console.log(data) } } } </script>
分析組件
接收
通過(guò)props接收父組件傳遞過(guò)來(lái)的數(shù)據(jù),通過(guò)工廠函數(shù)獲取一個(gè)默認(rèn)值。
傳遞
通過(guò)this.$emit('ai_click', title)
告訴父組件,我要傳遞一個(gè)事件,名字叫“ai_click”,請(qǐng)通過(guò)@ai_click接收一下,并且我將title的值返回父組件。
關(guān)于vue中怎么實(shí)現(xiàn)組件間參數(shù)傳遞問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。