vue 中父子兄弟通信最简单的例子包学包会

最新推荐文章于 2024-08-26 16:28:42 发布

hello world65536

最新推荐文章于 2024-08-26 16:28:42 发布

阅读量409

点赞数 3

分类专栏：前端文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_43176019/article/details/112883612

版权

本文提供Vue中父子和兄弟组件通信的简单示例，详细讲解了如何在父组件与子组件间以及兄弟组件间进行数据传递。

摘要由CSDN通过智能技术生成

1、父子组件通信

父组件

<father @fatherMethods="close">
	<son ref='son' :fatherValue='value'></son>
</father>
private	value = '我是你爸爸'; // 要传给子组件的值

// 父取子方法
private getSonMethods () {
	(this.$refs.son as son).open()  // 使用 ref 取到 子组件的方法 注 ref 取名 直接用类名 即可
}

// 父组件的方法 
private close () {
	console.log('我是父组件方法')
}

子组件

<son @click='open'></son>
@Prop({ default: 0 })  private fatherValue?: PdCAny; // 父组件用 : 加 要传的值的名字 后面接 要传的值

private created () { 
  	 //  接受来自父组件的数据 
	console.log( this.fatherValue );  //  输出: '我是你爸爸'
}

//  子组件的方法
private	open () {
	console.log('我是子组件')
}

// 子取父的方法
private getFatherMethods () {
	this.$emit( 'fatherMethods' ) //  输出: '我是父组件方法'
}