您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

16vue非父子组件传值完整 (emit,on)

发布时间：2023-04-10 17:34:11编辑：雪饮阅读（）

其实非父子组件传值可以利用父节点进行转发，结合如
15父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法(组件传值) (gaojiupan.cn)
这个就很容易实现，当然这只是我的理论。但应该也是没有什么问题的。
只不过我这里其实主要是利用$emit以及$on来实现，$emit广播事件，$on监听事件。
$emit应该是和$on在同一个vue实例中。
所以一般的建立公用的这个事件转发vue实例如
src/modes/ VueEvent.js
import Vue from 'vue';
var VueEvent=new Vue();
export default VueEvent;
这里假比一个header和footer组件之间进行传值。那么这两个组件应该是互相监听与互相广播的。
则如header.vue
<template>
    <div>
        <button @click="headerSendMessage">header发送一条消息</button>
    </div>
</template>
 
<script>
import VueEvent from '../modes/VueEvent';
export default{
    data(){
        return {}
    },
    methods:{
        headerSendMessage(){
            //参数1是所触发事件名,参数数是数据
            VueEvent.$emit("headerSendMessage","你好，我是header组件");
          },
    },
    mounted(){
            VueEvent.$on("footerSendMessage",function(data){
                    console.log("接收到footer组件发来的数据:"+data);
            });
    }
}
</script>
footer.vue
<template>
    <div>
        <button @click="footerSendMessage">footer发送一条消息</button>
    </div>
</template>
<script>
import VueEvent from '../modes/VueEvent';
export default{
    data(){
        return {}
    },
    methods:{
        footerSendMessage(){
            VueEvent.$emit("footerSendMessage","你好，我是footer组件");
          },
    },
    mounted(){
        //第一个参数是要监听的事件名，第二个参数是事件回调
        VueEvent.$on("headerSendMessage",function(data){
            console.log("接收到header组件发来的数据:"+data);
        });
    }
}
</script>
然后App.vue将这两个组件挂载于一起（其实感觉不用挂也可以，如果app.vue也要能收到，则同样可以用上面的这个公共vue去$on）
<template>
  <div id="app">
    <v-header></v-header>
    <v-footer></v-footer>
  </div>
</template>
 
<script>
    import header from './components/header.vue'
    import footer from './components/footer.vue'
    export default {    
      data () {
        return {}
      },
      methods:{},
      components:{
        "v-header":header,
        "v-footer":footer
      }
    }
</script>