vue非父子组件传值总结

非父子组件之间传值

路由跳转传值

发送方路由跳转方法时

```

  clickRowValFun(data){
    this.$router.push({path:'/pending-particulars/'+data.id});
  },
在需要跳转的路由后面加上你需要传递的参数





设置路由时
	```

	     {
          path: '/pending-particulars/:projectId',
          name: 'pendingParticulars',
          component: PendingParticulars
        },
	```

接收方接收时

	```

 		created(){
      		this.projectId = this.$route.params.projectId;
    	}
	```


#### 中央事件总线

在vue项目中,各组件之间是需要传值的,有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线。称为中央事件总线传值。

通过建立中间的事件bus总线。实现非父子组件之间的数据通信。

首先建立事件bus,我会新建一个bus.js文件;注册bus。
分别在组件中使用emit和on实现数据之间的通信;

##### bus.js 

	```

		//bus.js,注册Bus
		import Vue from 'vue'
		export default new Vue()
	```

##### 页面A发送方(组件emit触发事件)

	```


		
		
                    
                    

你可能感兴趣的:(vue)