Vue组件传输数据的二种方法

举报
拿我格子衫来 发表于 2022/03/17 22:27:25 2022/03/17
【摘要】 今天使用Vue做了一个小功能,用于展示自己的作品,如下图,有三个模块,唐诗三百首,LeetCode算法题和科目三考道,唐诗三百首是我用Node抓包抓的唐诗,LeetCode是一些LeetCode的算法题,也是使用Nodejs抓包抓的,科目三考道是使用Canvas画的考道图, 此项目使用vue-cli 工具生成,标准的vue项目,...

今天使用Vue做了一个小功能,用于展示自己的作品,如下图,有三个模块,唐诗三百首,LeetCode算法题和科目三考道,唐诗三百首是我用Node抓包抓的唐诗,LeetCode是一些LeetCode的算法题,也是使用Nodejs抓包抓的,科目三考道是使用Canvas画的考道图,


此项目使用vue-cli 工具生成,标准的vue项目,其中的三个模块使用的是一个组件Panel 他的上外层是组件Helloworld ,为了学习父子间的通信,Panel的展示数据全部由父级组件HelloWorld组件传入.在每个Panel组件上使用自定义的属性传入数据 如:

<Panel :title="algorithm" :arrData="algorithmArr"></Panel>

使用" : " 来设置属性, title是传入子组件的标题,如,唐诗三百首,arrData是一个列表对象[{name: '行宫', author: '元稹', content: '寥落古行宫,宫花寂寞红。白头宫女在,闲坐说玄宗。', link: ''}] 

父组件的js如下


components 需要设置引入的子组件, 在头部也需要import  Panel组件,


在子组件里我们通过props属性来获取父级传入的数据


如上图  这样子组件就能够使用父级传入的数据.

 对于子级向父级传数据的 我们使用自定义的事件来实现

父级组件在使用子组件时 添加一个自定义事件如

<Panel :title="poerty" :arrData="poetryArr" @msgFunc="func"></Panel>


这样就实现了 子级触发父级的一个事件,具体的业务处理逻辑操作在父级的func函数里完成


文章来源: fizzz.blog.csdn.net,作者:拿我格子衫来,版权归原作者所有,如需转载,请联系作者。

原文链接:fizzz.blog.csdn.net/article/details/78355656

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。