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>

子组件里在函数里这样写 就可以出发这个msgFunc事件

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