Vue 的單文件組件在使用 Vue 時非常常用，所以我們也會經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時候，大致分為三種情況：
文檔中也已經(jīng)詳細的說明了各種情況下的解決方法，但是現(xiàn)在我在還沒有閱讀多少文檔的情況下，沒有找到有單文件組件方面的具體書寫方式，智商和理解能力有限的情況下，自己嘗試了一下，最后發(fā)現(xiàn)其實是一樣的。所以這篇文章其實是廢話，但是還是想記錄一下，不枉自己花了一個多小時。
準備工作，我新建了 6 個文件，分別是：
父組件向子組件傳遞數(shù)據(jù)，通過 props 傳遞數(shù)據(jù)。
這里我以 page 向 msg 傳遞數(shù)據(jù)為例：page.vue 中
<template> <div class="page"> page <msg :love="message"></msg> </div></template><script>import msg from './msg.vue'export default { name: 'page', components: { msg }, data () { return { message: 'page-msg' } }}</script>msg.vue 中
<template> <div class="msg"> {{ love }} </div></template><script>export default { name: 'msg', props: ['love']}</script>這樣以后就會發(fā)現(xiàn)，實現(xiàn)了把父組件 page 中的數(shù)據(jù)傳遞到子組件 msg 中了。
另外，需要強調(diào)一下的是，不要在子組件中修改 props 的值，當然修改是有效的，非常不推薦，而且 Vue 也會有警告提示。正確的做法是傳遞給 data 中的屬性或者計算屬性。props 中的值是可以通過 this.love 訪問到的。
特別注意 props 值是引用類型時的情況，不可以進行簡單的賦值，會影響到父組件，正確的做法是進行深拷貝。
子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)。
父組件 page.vue 中
<template> <div class="page"> page <msg @passData="getData"></msg> </div></template><script>import msg from './msg.vue'export default { name: 'page', components: { msg }, data () { return { message: 'hi' } }, methods: { getData (data) { console.log(data) } }}</script>子組件 msg.vue 中
<template> <div class="msg"> {{ msg }} <button @click="pass">點擊</button> </div></template><script>export default { name: 'msg', data () { return { msg: 'hello' } }, methods: { pass () { this.$emit('passData', 'success') } }}</script>點擊后就會發(fā)現(xiàn) console 出了 'success'。
同級元素之間傳遞數(shù)據(jù)，通過 event bus 來傳遞。
需要引入一個 Vue 實例 作為中央總線。page 組件中
<template> <div class="page"> page <button @click="changeMsg">click</button> </div></template><script>import msg from './msg.vue'import { bus } from '../bus.js'export default { name: 'page', components: { msg }, data () { return { message: 'hi' } }, methods: { changeMsg () { bus.$emit('change', '666') } }}</script>footer 組件中
<template> <div class="footer"> footer </div></template><script>import { bus } from '../bus.js'export default { name: 'footer', data () { return { msg: 'hi' } }, created () { bus.$on('change',(data)=>{ console.log(data) }) }}</script>嗯，最后發(fā)現(xiàn)打印出來了 '666'，這樣就實現(xiàn)了。
最后總結(jié)一下：
父組件向子組件傳遞數(shù)據(jù)，通過 props 傳遞數(shù)據(jù)。具體做法只需要在父組件中綁定，在子組件中聲明。
//父組件<father> <child :love="msg"></child></father>//子組件export default { ... props: ['love']}子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)。具體做法時在父組件中監(jiān)聽，在子組件中觸發(fā)。
<father> <child @passData="getData"></child></father>//子組件export default { ... methods: { pass () { this.$emit('passData', 'hi') } }}兩個同級組件之間傳遞數(shù)據(jù)，通過 event bus 傳遞數(shù)據(jù)。
import { bus } from './bus.js'//兩個組件都要引入//觸發(fā)事件export default { ... methods: { passData () { this.$emit('communicate', 'hello') } }}//監(jiān)聽事件export default { ... mounted: { this.$on('communicate', (data) => { //... }) }}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
