vue中兄弟之間組件通信


我們知道Vue中組件之間的通信有很多方式,父子之間通信比較簡單,當我們使用vuex時候,兄弟組件之間的通信也很好得到解決

當我們項目較小時候,不使用vuex時候Vue中兄弟組件之間的通信是怎樣進行的呢

參考鏈接:https://my.oschina.net/u/3229305/blog/1820279

//在生成vue實例前,給Vue的原型上添加一個bus屬性,這個屬性是vue的實例,
//之后創建的vue實例都具有bus這個屬性
//首先在main.js
 Vue.prototype.bus = new Vue();

//組件hello

<template>
  <div class="container">
    <button @click="handler">hello word</button>
    <word></word>
  </div>
</template>
<script>
  import word from './word.vue'
  export default{
    methods:{
      handler () {
        this.$bus.$emit('shareText', 'hello word')
      }
    }
  }
</script>

// 組件world
<template>
  <div class="con">
    {{text}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      text: 'hello'
    }
  },
  mounted () {
    var that = this
    this.$bus.$on('shareText', function (text) {
      that.text = text
    })
  }

}
</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM