vue组件间如何进行通信？方法介绍

组件通信

尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。

另外，在子组件中修改父组件的状态是非常糟糕的做法，因为： 

• 这让父组件与子组件紧密地耦合； 

  立即学习“前端免费学习笔记（深入）”；

• 只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

每个Vue实例都是一个事件触发器：

• $on()——监听事件。

• $emit()——把事件沿着作用域链向上派送。（触发事件）

• $dispatch()——派发事件，事件沿着父链冒泡。

• $broadcast()——广播事件，事件向下传导给所有的后代。

监听与触发

v-on监听自定义事件：

    
        
        
    
    
        
        
        
        

            
Messages: {{ messages | json }}

							

								
								

									站长俱乐部购物系统
									
功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类
								
								下载 
							
						
            
        
    
    
    

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件：

    
        
        
    
    
        

          
{{ total }}
          
          
        
    
    
    

在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰v-on 。例如：

派发事件——$dispatch()

    
        
        
    
    
        

            
Messages: {{ messages | json }}
            
        
        

    
    
    

1. 子组件的button元素绑定了click事件，该事件指向notify方法

2. 子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数

3. 父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。

广播事件——$broadcast()

    
        
        
    
    
        

            
            Broadcast Event
            
        
        
        

    
    
    

和派发事件相反。前者在子组件绑定，调用$dispatch派发到父组件；后者在父组件中绑定，调用$broadcast广播到子组件。

父子组件之间的访问

• 父组件访问子组件：使用$children或$refs

• 子组件访问父组件：使用$parent

• 子组件访问根组件：使用$root

$children：

$ref可以给子组件指定索引ID：

效果与$children相同。

$parent：

如开篇所提，不建议在子组件中修改父组件的状态。

 非父子组件通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
    // ...
})

相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！