Vue组件之间数据通信12种方式_组件通信(1)

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

2401_84446610

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

阅读量267

点赞数 5

CC 4.0 BY-SA版权

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84446610/article/details/138315059

程序员专栏收录该内容

161 篇文章

订阅专栏

本文介绍了Vue组件之间12种数据通信方式，包括ref、eventBus、依赖注入(provide/inject)、$parent/$children、$root、vuex以及$attrs/$listeners。详细讲解了每种方式的使用场景和优缺点，重点讨论了跨代通信和非父子组件通信的解决方案。最后强调了面试准备和持续学习的重要性。

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

ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

用法：

在子组件中：

export default {
  data () {
    return {
      name: 'JavaScript'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

在父组件中：

<template>
调用子组件使用ref 获取子组件实例
  <child ref="child"></component-a>
</template>
<script>
  import child from './child.vue'
  export default {
    components: { child },
    mounted () {
      console.log(this.$refs.child.name);  // JavaScript 获取子组件数据
      this.$refs.child.sayHello();  // hello  调用子组件的方法
    }
  }
</script>

5、eventBus事件总线（$emit / $on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：

vue事件总线（eventBus），通过创建一个空的vue实例作为全局事件总线，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件

（1）创建事件中心管理组件之间的通信

// main.js
Vue.prototype.$bus = new Vue()
// child2
    this.$bus.$emit('bus', 'bus传值,组件2传过来的')
// child2
    this.$bus.$on('bus', (msg)=> {
      console.log('msg', msg)
    })

（2）发送事件假设有两个组件home About

（3）接收事件

在上述代码中，这就相当于将count值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。
vue3不再使用废除了

6、依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法
用法：
父组件中：

provide() { 
    return {     
        num: this.num  
    };
}

子组件中：

inject: ['num']

还有另一种写法，这种写法可以访问父组件中的所有属性：

provide() {
 return {
    app: this
  };
}
data() {
 return {
    num: 1
  };
}

inject: ['app']
console.log(this.app.num)

7.$parent / $children

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。

用法：

子组件中：

<template>
  <div>
    <span>{{message}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>

8. $children

父组件中：

<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <child></child>
    <button @click="change">点击改变子组件值</button>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: { child },
  data() {
    return {
      msg: 'Welcome'
    }
  },
  methods: {
    change() {
      // 获取到子组件
      this.$children[0].message = 'JavaScript'
    }
  }
}
</script>

在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。

注意：

通过 $parent 访问到的是上一级父组件的实例，可以使用 $roo t 来访问根组件的实例在组件中使用$ children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
$children 的值是数组，而 $parent是个对象

9. $root

挂在2在根组件实例上的data数据 —不推荐

子组件通过this.$root.xxx 可以访问

任意子组件访问

10.vuex

11. $attrs

12. $listeners

$attrs

用于父组件给孙组件传递数据

$listeners

用于孙组件给父组件传递数据

考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给C组件传递数据，这种隔代传数据的情况该使用哪种方式呢？

如果是用props/ $emit 来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用vuex，如果仅仅是传递数据，那可能有点浪费了。

针对上述情况，vue引入了 $attrs / $listeners，实组件之间的跨代通信。

** $a tt rs * * ：继承所有的父组件属性（除了 p ro p s 传递的属性、 c l a ss 和 s t y l e ），一般用在子组件的子元素上 * *$ listeners：**该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）