Vue 單文件中的數(shù)據(jù)傳遞示例

更新時(shí)間：2017年03月21日 11:49:09 作者：Hunter_Gu

本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

Vue 的單文件組件在使用 Vue 時(shí)非常常用，所以我們也會(huì)經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時(shí)候，大致分為三種情況：

父組件向子組件傳遞數(shù)據(jù)，通過(guò) props 傳遞數(shù)據(jù)。
子組件向父組件傳遞數(shù)據(jù)，通過(guò) events 傳遞數(shù)據(jù)。
兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)，通過(guò) event bus 傳遞數(shù)據(jù)。

文檔中也已經(jīng)詳細(xì)的說(shuō)明了各種情況下的解決方法，但是現(xiàn)在我在還沒(méi)有閱讀多少文檔的情況下，沒(méi)有找到有單文件組件方面的具體書(shū)寫(xiě)方式，智商和理解能力有限的情況下，自己嘗試了一下，最后發(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ù)，通過(guò) 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>

這樣以后就會(huì)發(fā)現(xiàn)，實(shí)現(xiàn)了把父組件 page 中的數(shù)據(jù)傳遞到子組件 msg 中了。

另外，需要強(qiáng)調(diào)一下的是，不要在子組件中修改 props 的值，當(dāng)然修改是有效的，非常不推薦，而且 Vue 也會(huì)有警告提示。正確的做法是傳遞給 data 中的屬性或者計(jì)算屬性。props 中的值是可以通過(guò) this.love 訪問(wèn)到的。

特別注意 props 值是引用類型時(shí)的情況，不可以進(jìn)行簡(jiǎn)單的賦值，會(huì)影響到父組件，正確的做法是進(jìn)行深拷貝。

子組件向父組件傳遞數(shù)據(jù)，通過(guò) 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">點(diǎn)擊</button>
 </div>
</template>

<script>
export default {
 name: 'msg',
 data () {
   return {
     msg: 'hello'
   }
 },
 methods: {
   pass () {
   this.$emit('passData', 'success')
  }
 }
}
</script>

點(diǎn)擊后就會(huì)發(fā)現(xiàn) console 出了 'success'。

同級(jí)元素之間傳遞數(shù)據(jù)，通過(guò) event bus 來(lái)傳遞。

需要引入一個(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>

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)打印出來(lái)了 '666'，這樣就實(shí)現(xiàn)了。

最后總結(jié)一下：

父組件向子組件傳遞數(shù)據(jù)，通過(guò) props 傳遞數(shù)據(jù)。具體做法只需要在父組件中綁定，在子組件中聲明。

//父組件
<father>
  <child :love="msg"></child>
</father>

//子組件
export default {
  ...
  props: ['love']
}

子組件向父組件傳遞數(shù)據(jù)，通過(guò) events 傳遞數(shù)據(jù)。具體做法時(shí)在父組件中監(jiān)聽(tīng)，在子組件中觸發(fā)。

<father>
  <child @passData="getData"></child>
</father>

//子組件
export default {
  ...
  methods: {
    pass () {
      this.$emit('passData', 'hi')
    } 
  }
}

兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)，通過(guò) event bus 傳遞數(shù)據(jù)。

import { bus } from './bus.js'//兩個(gè)組件都要引入

//觸發(fā)事件
export default {
  ...
  methods: {
    passData () {
      this.$emit('communicate', 'hello')
    } 
  }
}

//監(jiān)聽(tīng)事件
export default {
  ...
  mounted: {
    this.$on('communicate', (data) => {
      //...
    })
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: