vue 组件之间的传值以及方法调用

最新推荐文章于 2025-07-05 13:44:41 发布

原创最新推荐文章于 2025-07-05 13:44:41 发布 · 798 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue中父子组件、兄弟组件以及不相关组件之间的数据传递方法，包括属性绑定、事件监听、使用事件总线等技巧，为Vue开发者提供全面的组件通信指南。

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

父子组件传值

父页面引用子页面

// 父页面代码
<template>
  <div>
  <component-A :logo="logoMsg"></component-A>  //logoMsg是父组件data里的值
  </div>  
</template>

<script>
import componentA from './component-a.vue'

export default {
  data() {
    return {}
  },
  components: {
    'component-A': componentA
  }
}
</script>



// 子页面代码
<template>
   <div class="componentA">
     <div>{{logo}}</div>
   </div>
</template>
<script>
export default {
  props: ['logo'],  // 获取父页面传来的值
  data() {
    return {} 
  }
}
</script>

子组件调用父组件方法并向父组件传值

// 父页面代码
<template>
  <div>
  <component-A :logo="logoMsg" @toParent="componenta"></component-A>  //logoMsg是父组件data里的值
  </div>  
</template>

<script>
import componentA from './component-a.vue'

export default {
  data() {
    return {}
  },
  components: {
    'component-A': componentA
  },
  methods: {
    componenta(data) {  // data就是子组件传递过来的值
      console.log(data)
    }
  }
}
</script>

// 子页面代码
<template>
   <div class="componentA">
     <div>{{logo}}</div>
   </div>
</template>
<script>
export default {
  props: ['logo'],  // 获取父页面传来的值
  data() {
    return {} 
  },
  methods: {
    toParent() {
      this.$emit('toParent', '11111') // 调用父组件toParent方法，并传递参数
    }
  }
}
</script>

兄弟组件传值

先子传父，再父传子

不相关组件传值

创建一个Vue的实例，让各个组件共用同一个事件机制。
传递数据方，通过一个事件触发eventVue. $emit(方法名，传递的数据)。接收数据方，通过mounted(){}触发eventVue.$ on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})

创建一个单独的js文件,eventVue.js：

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

// 组件A页面
<template>
   <div class="componentA">
   </div>
</template>
<script>
import eventVue './eventVue.js'

export default {
  data() {
    return {} 
  },
  created(){
    eventVue.$on('byBus', (data) => {  // 组件A $on接受事件传递数据
      this.busData = data
    })
  },
  methods: {
    
  }
}
</script>

// 组件B页面
<template>
   <div class="componentB">
   </div>
</template>
<script>
import eventVue './eventVue.js'

export default {
  data() {
    return {} 
  },
  methods: {
    byBus() {
       eventVue.$emit('byBus',this.byBusData) //组件B $emit触发事件
    }
  }
}
</script>