vue组件通信----父传子(超详细)
发布日期:2022-03-15 19:30:48
浏览次数:8
分类:技术文章
本文共 897 字,大约阅读时间需要 2 分钟。
Vue传值
1.父传子
简单描述
父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)
实现步骤
1.子组件在props中创建一个属性,用于接收父组件传过来的值;
2.父组件 引入子组件–>注册子组件–>引用子组件; 3.在子组件标签中添加子组件props中创建的属性; 4.将所要传递的值赋值给该属性。
props接收的几种写法
1.直接使用 props 以一维数组的方式接收
props: ['childCom']
2.接收字符串
props: { childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦}
3.使用对象形式接收,并赋予默认值,但是在数组这里接收有问题,一个大坑,请看第四种
props: { childCom: { type: String, default: 'sichaoyun' }}
4.第三种写法:接收数组,是需要以函数形式接收
props: { minetlist: { type: Array, default: function () { return [] } } }
特别注意:
所有的prop都使得其父子prop形成一个单向数据流,即单向下数据流。父级prop的更新会单向流动到子组件中,但是反过来则不行,单向数据流能防止子组件意外改变父组件的状态
。额外的,每次父组件发生改变时,子组件中的prop将会更新为最新的值。
代码演示
1 . 父组件parent.vue代码如下
{ { msg }}
2 . 子组件son代码如下:
{
{ sonMsg }}子组件接收到内容:{
{ faMsg }}
转载地址:https://blog.csdn.net/weixin_58102387/article/details/122850073 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年03月25日 20时51分43秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
sql注入
2019-04-25
textarea在光标后追加内容,并将换行符替换成br标签
2019-04-25
kafka客户端脚本windows版
2019-04-25
zookeeper基础教程
2019-04-25
zookeeper单机版安装教程
2019-04-25
zookeeper集群版安装教程
2019-04-25
Spring @Cacheable当返回值为null时报错解决方案
2019-04-25
什么是二分查找、插值查找、斐波那契查找和索引查找?
2019-04-25
什么是二叉查找树,有什么优势?
2019-04-25
下次再让你讲平衡二叉树,可别说不会了
2019-04-25
什么是B-树、B树、B+树、B*树?
2019-04-25
B树结点的插入删除操作
2019-04-25
soul源码学习-20210114
2019-04-25
编程语言介绍
2019-04-25
JVM 基础知识
2019-04-25
Java字节码(一)
2019-04-25
JVM 类加载器
2019-04-25
java内存模型(一)
2019-04-25
java内存模型(二)
2019-04-25