Vue 的單文件組件在使用 Vue 時(shí)非常常用仑撞，所以我們也會(huì)經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時(shí)候，大致分為三種情況：
- 父組件向子組件傳遞數(shù)據(jù)悴品，通過 props 傳遞數(shù)據(jù)贷币。
- 子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)握联。
- 兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)桦沉，通過 event bus 傳遞數(shù)據(jù)。
文檔中也已經(jīng)詳細(xì)的說明了各種情況下的解決方法金闽，但是現(xiàn)在我在還沒有閱讀多少文檔的情況下纯露，沒有找到有單文件組件方面的具體書寫方式，智商和理解能力有限的情況下代芜，自己嘗試了一下埠褪，最后發(fā)現(xiàn)其實(shí)是一樣的。所以這篇文章其實(shí)是廢話挤庇，但是還是想記錄一下钞速，不枉自己花了一個(gè)多小時(shí)。
準(zhǔn)備工作嫡秕，我新建了 6 個(gè)文件渴语，分別是：
- index.html
- main.js 「Vue 實(shí)例」
- app.vue 「根組件，包含 page 和 footer 組件」
- page.vue 「msg 的父組件昆咽，footer 的 同級(jí)組件」
- msg.vue
- footer.vue
父組件向子組件傳遞數(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>
<style>
</style>
msg.vue 中
<template>
<div class="msg">
{{ love }}
</div>
</template>
<script>
export default {
name: 'msg',
props: ['love']
}
</script>
<style>
</style>
這樣以后就會(huì)發(fā)現(xiàn)，實(shí)現(xiàn)了把父組件 page 中的數(shù)據(jù)傳遞到子組件 msg 中了狭郑。
另外腹暖，需要強(qiáng)調(diào)一下的是，不要在子組件中修改 props 的值翰萨，當(dāng)然修改是有效的脏答，非常不推薦，而且 Vue 也會(huì)有警告提示亩鬼。正確的做法是 傳遞給 data 中的屬性或者計(jì)算屬性殖告。props 中的值是可以通過 this.love 訪問到的。
特別注意 props 值是引用類型時(shí)的情況雳锋，不可以進(jìn)行簡(jiǎn)單的賦值黄绩，會(huì)影響到父組件，正確的做法是進(jìn)行深拷貝玷过。
子組件向父組件傳遞數(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>
<style>
</style>
子組件 msg.vue 中
<template>
<div class="msg">
{{ msg }}
<button @click="pass">點(diǎn)擊</button>
</div>
</template>
<script>
export default {
name: 'msg',
data () {
return {
msg: 'hello'
}
},
methods: {
pass () {
this.$emit('passData', 'success')
}
}
}
</script>
<style>
</style>
點(diǎn)擊后就會(huì)發(fā)現(xiàn) console 出了 'success'辛蚊。
同級(jí)元素之間傳遞數(shù)據(jù)粤蝎，通過 event bus 來傳遞。
需要引入一個(gè) Vue 實(shí)例 作為中央總線袋马。
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>
<style>
</style>
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>
<style>
</style>
嗯初澎，最后發(fā)現(xiàn)打印出來了 '666'，這樣就實(shí)現(xiàn)了虑凛。
最后總結(jié)一下：
- 父組件向子組件傳遞數(shù)據(jù)碑宴，通過 props 傳遞數(shù)據(jù)。具體做法只需要在父組件中綁定桑谍，在子組件中聲明延柠。
//父組件
<father>
<child :love="msg"></child>
</father>
//子組件
export default {
...
props: ['love']
}
- 子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)霉囚。具體做法時(shí)在父組件中監(jiān)聽捕仔，在子組件中觸發(fā)匕积。
<father>
<child @passData="getData"></child>
</father>
//子組件
export default {
...
methods: {
pass () {
this.$emit('passData', 'hi')
}
}
}
- 兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)盈罐，通過 event bus 傳遞數(shù)據(jù)。
import { bus } from './bus.js'//兩個(gè)組件都要引入
//觸發(fā)事件
export default {
...
methods: {
passData () {
this.$emit('communicate', 'hello')
}
}
}
//監(jiān)聽事件
export default {
...
mounted: {
this.$on('communicate', (data) => {
//...
})
}
}
嗯闪唆，廢話較多盅粪，毫無干貨。作為剛進(jìn)入前端行業(yè)悄蕾，剛開始寫博客的新人票顾，缺點(diǎn)和不足麻煩大家指出础浮。轉(zhuǎn)載需注明出處。
