vue不同组件传参,非父子组件通信。
当我们需要通过不同的组件来传递数据的时候:1.父组件传递数据给子组件,可以通过props属性来实现;2.子组件与父组件通信,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变父组件数据的目的;3.有时候我们会出现非父子组件通信,比如当我们在A页面的某个按钮上面绑定事件,点击后需要将信息传入B页面。当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,
1.父组件传递数据给子组件,可以通过props属性来实现;
2.子组件与父组件通信,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变父组件数据的目的;
<template>
<div @click="onClick"></div>
</template>
methods: {
onClick() {
this.$emit('getmsg',msg); //主动触发getmsg方法,msg为向父组件传递的数据
}
}
父组件:
<div>
<child @getmsg="change"></child> //监听子组件触发的getmsg事件,然后调用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
3.有时候我们会出现非父子组件通信,比如当我们在A页面的某个按钮上面绑定事件,点击后需要将信息传入B页面。当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改。然而,有时候我们的项目并没有复杂到需要用上Vuex。,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需要一个事件的捕获,这时候我们就可以用到vue的eventbus了。
2)A组件中通过触发事件,来传递数据
- methods: {
- addCart(event) {
- this.$bus.$emit('getTarget', message);
- }
- }
3)B组件,这里我们在A组件中每次点击,都会在bus中触发这个名为'getTarget'的事件,并将点击事件的event.target顺着事件传递出去。
接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:
created(){
this.$bus.$off('getTarget'); //为了避免事件被多次触发,先手动销毁该事件。
更多推荐
所有评论(0)