vue通信的N种方式

最新推荐文章于 2025-07-02 09:47:44 发布

灿尔哈擦苏

最新推荐文章于 2025-07-02 09:47:44 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端开发 js web前端文章标签： vue vue组件通信 vue组件传值 vue父子组建通信

本文链接：https://blog.youkuaiyun.com/susuzhe123/article/details/93665304

本文详细介绍了Vue组件间的通信方式，包括父组件向子组件传递数据的props和provide/inject，子组件传值给父组件的props回调、$emit及.sync，关系型组件跨级传递的$attrs/$listeners和$parent/$children，以及非关系组件通信的EventBus和Vuex解决方案。

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

组件通信可以分为父子组件通信、非父子组件通信，可以是数据的传递，也可以是方法的传递，先介绍数据的相互传递，再介绍方法的相互传递。

父组件到子组件传递数据：

一、通过props，父组件可以传递动态和静态数据。

//父组件
<template>
  <div id="app">
  	//第一种静态数据 <HelloWorld msg="我是父组件的数据"/>
    //第二种动态绑定 <HelloWorld :msg="message"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data(){
    return{
      message: '我来自父组件'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

//子组件
<template>
  <div class="hello">
    来自父组件的值：{
  
  {msg}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['msg']
  //或者 props: { msg: String//指定传入的类型 }
  //或者 props: { msg: String,default: '默认值' //指定默认值 }
}
</script>

二、provide / inject

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

//父组件
<template>
   <div>
     <child-dom>
     </child-dom>
   </div>
</template>
<script>
   import childDom from "./components/ChildDom.vue";
   export default {
     data() {
       return{

       }
     },
     provide: {
      house: '房子',
      car: '车子',
      money: '￥10000'
    },
     methods:{
      
     },
     components:{childDom},
   }
</script>

//子组件
<template>
   <div>
    
   </div>
</template>
<script>

   export default {
     data() {
       return{

       }
     },
     inject: {
	    house: {
	      default: '没房'
	    },
	    car: {