vue cli3+typescript 组件通信
程序员文章站
2022-05-17 21:02:36
...
1.写一个bus.ts文件 把想传的值提到全局去 之后全局调用
使用bus发送数据:
bus.$emit("sendData",{data:"需要发送的数据"})
接收数据(可以写在created生命周期函数中):
bus.$on("sendData",d=>{console.log(d)})
销毁,防止全局污染:(一般写在beforeDestroy里)
bus.$off("sendData");
2.在父组件里起一个在子组件emit调用的名字
<SerchBar @OnSerch={handleSerch} ></SerchBar>
//handleSerch方法中的参数可以取到serarchValue的值
//在tsx里 onOnSerch 用on 不用@;handleSerch方法用 this.handleSerch调用
public handleSerch(){}
在子组件里 :
//tsx写法
<div onClick={this.handleClick}></div>
public handleClick(){
this.$emit('onSearch', serarchValue);
}
子-->父-->另一个子 / 许多别的子组件 => 子->子