vue中非父子組件的傳值

vue中非父子組件的傳值

/*非父子組件傳值
  1.新建一個js文件,然后引入vue,實例化vue,最后暴露這個實例
  2.在要廣播的地方引入剛才定義的實例
  3.通過 VueEvent.$emit("名稱",數據)
  4.在接收數據的地方通過$on接收廣播的數據
       VueEvent.$on('名稱',function () {

    })*/

App.vue根組件

<template>
  <div id="app">
    <v-home></v-home>
    <br>
    <hr>
    <v-news></v-news>
  </div>
</template>

<script>
  /*非父子組件傳值
    1.新建一個js文件,然后引入vue,實例化vue,最后暴露這個實例
    2.在要廣播的地方引入剛才定義的實例
    3.通過 VueEvent.$emit("名稱",數據)
    4.在接收數據的地方通過$on接收廣播的數據
         VueEvent.$on('名稱',function () {

      })*/
  import Home from './components/Home'
  import News from './components/News'

  export default {
  name: 'App',
  data(){
    return {

    }

  },
  methods:{

  },
  components:{
    "v-home": Home,
    "v-news": News,
  }
}
</script>

<style>

</style>

Home組件

<template>
<div id="home">
  我是首頁組件
  <br>
  <button @click="emitNews()">給News組件廣播數據</button>

  <br>
</div>
</template>

<script>
import VueEvent from '../model/VueEvent.js'
    export default {
        name: "Home",
        data(){
          return {
            msg: '我是一個home組件'

          }
        },
      mounted(){
        VueEvent.$on('to-home',function (data) {
          console.log('111111111'+data)
        })
      },
      methods:{
        emitNews(){
          VueEvent.$emit("to-news",this.msg)
        }
      }

    }
</script>

<style scoped>

</style>

News.vue

<template>
  <div id="news">
    我是新聞組件
    <br>
    <button @click="toHome()">給home組件廣播數據</button>
  </div>
</template>

<script>

  import VueEvent from '../model/VueEvent.js'
  export default {
    name: "Header",
    data() {
      return {
        msg:'我是新聞組件'
      }

    },
    mounted(){
      VueEvent.$on('to-news',function (data) {
        console.log(data)
      })
    },
    methods: {
      toHome(){
        VueEvent.$emit('to-home',this.msg)
      }

    },

  }
</script>

<style scoped>

</style>

VueEvent.js

import Vue from 'vue'
let VueEvent = new Vue()

export default VueEvent

　　整個目錄結構

運行效果: