vue组件间的交互方法总结（边用边整理）

今天突然想总结下vue组件之间的交互方法，于是边写case边整理

交互方式一：使用props 和 $emit

【解析】父组件通过v-on绑定一个属性向子组件传递数据，子组件通过props接收父组件的数据；

              子组件通过$emit向父组件发送一个事件，父组件通过子组件发送的自定义事件进行接收子组件传递过来的数据。

               vm.$emit( “事件名”, 参数)

代码如下：

  

     
Parent
     
Child Data==> {{childMsg}}
  
  

执行代码效果图如下：

交互方式二：$ref

【解析】父组件通过在使用子组件的便签上使用ref="refName"属性，并且通过vue.$refs.refName来获取整个子组件定义的的属性和方法

【知识点】：①this.$options.data()    //获取本组件初始化数据  

    代码如下：

         ⒈父组件代码

    

      

        
Parent
      
      
    

        ⒉子组件的数据

    
Child
    
    
父组件传过来的数据=>{{message}}
{{pdata}}

实现效果：

控制台打印的数据展示：

以上总结：

1）如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可以获取到在子组件里定义的属性和方法。

2）如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可以获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

3）ref和props的区别：

①prop 着重于数据的传递，它并不能调用子组件里的属性和方法。比如创建类似于文章的组件时，自定义标题和内容这样的使用场景，最适合使用prop。

②$ref 着重于索引，主要用来调用子组件里的属性和方法，它并不擅长数据传递。而且ref用在dom元素的时候，能起到选择器的作用，这个功能比作为索引更常用到。

 

交互方式三：$children和$parent

【解析】父组件可以通过$children来获取子组件定义的属性和方法，拿到的是一个数组，可以通过 $children[i].paramsName 来获取某个子组件的属性值或函数

同样的，子组件也可以通过$parent来获取直接父亲组件定义的属性和方法。

代码如下：

⒈父组件

    

      

        
Parent
        

          
Child-1的数据=>
          
{{child1_data}}
        
        

          
Child-2的数据=>
          
{{child2_data}}
        
      
      
      
    

⒉子组件Child1.vue

⒊子组件Child2.vue

效果展示：

控制台打印信息展示：

交互方式四：$attrs和$listeners

【问题描述】父组件A和子组件B之间的传值可以用props，但是如果父组件A想要和B组件的子组件C通信应该怎么传值呢？虽然可以通过父组件A先向子组件B组件通过props传值，再通过子组件B用props向B组件的子组件C传值，虽然这样能够实现，但是如果是A组件向B组件的子组件C的子组件D传值呢？如果C组件中的数据发生了变化，那么A组件如何能更新到变化之后的数据呢？

【解析】Vue2.4中引入了$attrs和$listeners，新增了inheritAttrs 选项

先来实现以上问题中，我们先来实现A向C传递数据

A组件

    

      

        
父组件A
      
      
    

B组件

C组件

在B组件中，如果不设置inheritAttrs:false,这个属性的话，则元素

A组件向C组件传递值COO，需要在B组件调用B组件的子组件的地方绑定$attrs，也就是

C组件接收的时候，同样也需要用props来声明，

coo==>{{coo}}

然后直接取值就可以了

以上是实现A组件向子组件的子组件传递数据的过程，那么如果C组件中接收到的数据发生了改变，A组件又如何才能更新到呢？

A组件：

    

      

        
父组件A
        
接收到的数据=>{{received}}
      
      
    

B组件：

C组件：

以上代码，在C组件中用sund值来更新接收到的COO，通过$emit向A发送数据，在B组件中调用C组件的地方绑定了$listeners

在A组件中用自定义事件接收C组件的数据

即可实现通信。