Vue 單文件中的數據傳遞

  Vue 的單文件組件在使用 Vue 時很是經常使用，因此咱們也會常常遇到組件之間須要傳遞數據的時候，大體分爲三種狀況：

• 父組件向子組件傳遞數據，經過 props 傳遞數據。

• 子組件向父組件傳遞數據，經過 events 傳遞數據。

• 兩個同級組件之間傳遞數據，經過 event bus 傳遞數據。

  文檔中也已經詳細的說明了各類狀況下的解決方法，可是如今我在尚未閱讀多少文檔的狀況下，沒有找到有單文件組件方面的具體書寫方式，智商和理解能力有限的狀況下，本身嘗試了一下，最後發現實際上是同樣的。因此這篇文章實際上是廢話，可是仍是想記錄一下，不枉本身花了一個多小時。

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

• index.html

• main.js 「Vue 實例」

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

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

• msg.vue

• footer.vue

父組件向子組件傳遞數據，經過 props 傳遞數據。

這裏我以 page 向 msg 傳遞數據爲例：
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>

  這樣之後就會發現，實現了把父組件 page 中的數據傳遞到子組件 msg 中了。
  另外，須要強調一下的是，不要在子組件中修改 props 的值，固然修改是有效的，很是不推薦，並且 Vue 也會有警告提示。正確的作法是傳遞給 data 中的屬性或者計算屬性。props 中的值是能夠經過 this.love 訪問到的。
  特別注意 props 值是引用類型時的狀況，不能夠進行簡單的賦值，會影響到父組件，正確的作法是進行深拷貝。

子組件向父組件傳遞數據，經過 events 傳遞數據。

父組件 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">點擊</button>
  </div>
</template>

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

<style>

</style>

點擊後就會發現 console 出了 'success'。

同級元素之間傳遞數據，經過 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>

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

嗯，最後發現打印出來了 '666'，這樣就實現了。

最後總結一下：

• 父組件向子組件傳遞數據，經過 props 傳遞數據。具體作法只須要在父組件中綁定，在子組件中聲明。

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

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

• 子組件向父組件傳遞數據，經過 events 傳遞數據。具體作法時在父組件中監聽，在子組件中觸發。

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

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

• 兩個同級組件之間傳遞數據，經過 event bus 傳遞數據。

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

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

//監聽事件
export default {
    ...
   mounted: {
        this.$on('communicate', (data) => {
            //...
        })
   }
}

嗯，廢話較多，毫無干貨。做爲剛進入前端行業，剛開始寫博客的新人，缺點和不足麻煩你們指出。轉載請註明出處。