vue子组件之间传值

最新推荐文章于 2024-09-05 20:24:22 发布

zhaofeiweb

最新推荐文章于 2024-09-05 20:24:22 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/zhaofeiweb/article/details/88554115

vue 专栏收录该内容

45 篇文章

订阅专栏

本文深入探讨了Vue.js中实例间的通信机制，详细解释了如何通过new Vue()创建事件总线，实现组件间的数据传递与事件监听。文章涵盖了Event.$emit()用于发送数据，Event.$on()用于接收数据的方法，并提供了子组件向父组件传值的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　var Event = new Vue();　　　　　　相当于又new了一个vue实例，Event中含有vue的全部方法；

　　Event.$emit('msg',this.msg);　　　发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；

　　Event.$on('msg',function(msg){　　接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

　　　　/这里是对数据的操作

　　})

或者新建一个空的js文件

import Vue from 'vue'
export default new Vue()

import vmson from '@/services/emptyVue'
export default {
  name: 'RegionA',
  props: [],
  data () {
    return {
      PoiNames: ['旅游景点', '餐饮', '学校', '休闲娱乐', '医疗', '超市', '便利店', '写字楼', '小区', '酒店', '银行', '运动健身'],
      PoiList: []
    }
  },
  methods: {
  },
  mounted () {
    vmson.$on('poiList', (val) => { // 监听事件poiList回调函数要使用箭头函数 接收文件
      console.log('ccc', val) // 
    })
  }
}
</script>

另一个子组件使用

vmson.$emit('poiList', results) 去传值