首页 > 其他 > 详细

组件之间的传值:1)父子组件之间的传值 2)非父子组件之间的传值

时间:2021-01-28 17:59:29      阅读:23      评论:0      收藏:0      [点我收藏+]

1、父子组件之间的传值

 

1)父组件向子组件传值

技术分享图片

 

 

 技术分享图片

 

 

 注意子组件接受的参数,不要和自身属性的值一样,以msg为例:

父组件:

技术分享图片

 

 

 子组件:

技术分享图片

 

 

 虽然显示,但是报错了:

技术分享图片

 

 

 

父组件给子组件传值不仅可以传数据还可以传方法:

技术分享图片

 

 

 

run(){
alert(‘我是Home组件的run方法‘);
}
子组件接收:

技术分享图片

 

 

 子组件点击执行父组件的run方法:

技术分享图片

 

 

 

技术分享图片

 

 

 

子组件执行父子间的方法:

子组件:

技术分享图片

 

父组件接收参数:

 

 

技术分享图片

 

 

 

点击子组件的按钮:

技术分享图片

 

 

 既然可以把方法传给子组件,也可以把父组件整个实例传过去:

1、

技术分享图片

 

 

 

 

 

 

2、子组件接收home

 

技术分享图片

 

 

 

 

技术分享图片

 

 

 加一个按钮执行父组件的数据和方法:

技术分享图片

 

 

 

 技术分享图片

子组件通过props验证数据的合法性:

技术分享图片

 

 

技术分享图片

 

 

 

2)子组件向父组件传值

 

 

2、非父子组件之间的传值

组件之间的传值:1)父子组件之间的传值 2)非父子组件之间的传值

原文:https://www.cnblogs.com/weibo258/p/14338884.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!