本文共 835 字，大约阅读时间需要 2 分钟。

一,前言

前面介绍了父子组件通信,使用Bus中央事件总线实现各种组件的通信组件通信的方式还可以用过父链和子组件索引来实现本篇介绍父链和子组件索引如何实现组件通信

二,父链

在子组件中,可以使用this.$parent对组件的父级(父实例或父组件)进行访问父组件也可以通过this.$children访问其下的全部子组件(无限递归直至根实例或最内层组件)

通过一个简单的例子介绍父链的使用:

   
        接收到的数据:    {
   { message }}    
    
    
    
   

运行结果:

虽然Vue提供了通过父链进行操作的功能,但在实际开发中尽量不要使用这种方式修改数据处于耦合考虑,子组件应尽量避免依赖父组件数据,更不应主动修改父组件的数据正常情况下,只有组件自己才能够修改自己的状态,不然组件状态将很难管理和维护对于父子组件最好通过props和$emit进行通信

三,子组件索引

当子组件很多时,通过this.$children遍历找到我们需要的组件实例是一件很困单的事情而且,在组件动态渲染时,顺序并不是固定不变的,这里可以使用Vue提供的子组件索引方法,通过ref属性,为子组件添加唯一索引,通过this.$refs指定名称可直接查找到对应的子组件

通过一个简单的例子介绍子组件索引的使用:

   
    
        
    
    
    通过子组件索引获取子组件值    
    
    
    
    获取的值为: {
  { getMessage }}
   

运行结果:

通过ref属性直接找到我们需要操作的子组件并完成数据更新

注意:

$refs只在组件渲染完成后才填充,并且是非响应式的,因此应皮面在模板或计算属性中使用$refs

四,结尾

到这里全部组件通信的方式就简单介绍完毕了下一篇开始介绍slot插槽