Vue 單檔案中的資料傳遞

Hunter_Gu發表於2017-03-21
原文網址 : https://segmentfault.com/a/1190000008769562
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) => {
            //...
        })
   }
}

嗯，廢話較多，毫無干貨。作為剛進入前端行業，剛開始寫部落格的新人，缺點和不足麻煩大家指出。轉載請註明出處。

相關文章