使用Vue怎么在單文件中傳遞數(shù)據(jù)-創(chuàng)新互聯(lián)

這篇文章給大家介紹使用Vue怎么在單文件中傳遞數(shù)據(jù)，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：主機域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、新和網(wǎng)站維護、網(wǎng)站推廣。

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

  1. 父組件向子組件傳遞數(shù)據(jù)，通過 props 傳遞數(shù)據(jù)。

  2. 子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)。

  3. 兩個同級組件之間傳遞數(shù)據(jù)，通過 event bus 傳遞數(shù)據(jù)。

文檔中也已經(jīng)詳細的說明了各種情況下的解決方法，但是現(xiàn)在我在還沒有閱讀多少文檔的情況下，沒有找到有單文件組件方面的具體書寫方式，智商和理解能力有限的情況下，自己嘗試了一下，最后發(fā)現(xiàn)其實是一樣的。所以這篇文章其實是廢話，但是還是想記錄一下，不枉自己花了一個多小時。

準備工作，我新建了 6 個文件，分別是：

  1. index.html

  2. main.js 「Vue 實例」

  3. app.vue 「根組件，包含 page 和 footer 組件」

  4. page.vue 「msg 的父組件，footer 的 同級組件」

  5. msg.vue

  6. 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>

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) => {
      //...
    })
  }
}

關(guān)于使用Vue怎么在單文件中傳遞數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標題：使用Vue怎么在單文件中傳遞數(shù)據(jù)-創(chuàng)新互聯(lián)
當前鏈接：http://www.muchs.cn/article46/ddsjhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、移動網(wǎng)站建設(shè)、網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化