记录一下项目中遇到的问题。
因为一个流程对应一种单据,所以每次点击单据详情,应该出现相应的单据内容。在另一个页面,也需要调用这个单据内容。
因为vue不能直接调用弹出框,所以老师把单据内容写成了组件,在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。(其实在本来显示单据内容的页面,只要根据后端传的内容判断显示哪个单据就可以,但是因为在另一个页面也需要调用单据内容,所以写成组件会更方便。由此,如果一个页面或者弹出框,在很多个页面需要用到,可以把这个地方的内容写成组件)
父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件。显然在项目中,单据内容的页面是子组件,引用单据内容的页面是父组件。
我们的子组件applyType.vue:
父组件:
1.父组件调用子组件
首先import 子组件名称 from 子组件地址,接着在components里面添加这个子组件名称,子组件就被调用了。
然后在需要这个子组件的地方,调用这个子组件就可以。
而在父组件中是不能直接调用子组件中的变量值的。所以父子组件如何传值?
2.父组件向子组件传值
父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用 。
:子组件接收父组件数据的元素="父组件传递的值"
3.子组件接收父组件传来的值
使用props进行接收。
如此,父组件就可以调用子组件,并显示子组件里的内容啦。
结合实例:
子组件只是一个页面,里面是没有内容的。所以需要父组件传给子组件,子组件才能显示内容。
上面的这个方法,最后由于那个附加单据里的内容很多很杂,不方便重新写,所以最后采用的是router-view路由跳转的方法,详情可以看这篇文章vue使用router-view调用页面_芝士焗红薯的博客-CSDN博客
但是最近又有一个类似的功能需要用到父子组件传值,终于算是把父子组件传值整明白了一点。首先一个问题就是,所有的方法都要写在父组件里。我本来想把cradno传给子组件,然后在子组件里调用所有的方法(因为需要调用的方法太多了)。但是发现不可以。因为子组件的方法调用,在父组件把cardno传给子组件之前。(我是真的不知道可以不可以,可能真的也是可以的,只是我不会。)
总之最后,我们只能在父组件里调用方法,然后把返回的所有的值,都传给子组件就行,也非常的方便。
父组件:
在data里也需要定义 :
photoPath: '', // 照片
currentCardNo: '', // 当前的身份证
// currentRow:{}, // 当前行
xljlTable: [], // 学历简历表格
jzdsqkTable:[], // 兼职导师情况表格
gzjlTable:[], // 工作经历
lwfbqkTable:[], // 论文发表情况
zzcbqkTable:[], // 著作出版情况
zcktqkTable:[], // 主持课题情况
jlhbzqkTable: [], // 奖励或表彰情况
fwshqkTable: [], // 服务社会情况
ndxjTable: [], // 年度小结
bgxxTable: [], // 变更信息
引入子组件,调用接口:
子组件只需要写好页面,接受props就可以啦
props: {
// currentCardNo:String
detailForm:Object,
xljlTable: Array,
jzdsqkTable:Array,
gzjlTable:Array,
lwfbqkTable:Array,
zzcbqkTable:Array,
zcktqkTable:Array,
jlhbzqkTable: Array,
fwshqkTable: Array,
ndxjTable: Array,
bgxxTable: Array,
selectList: Object,
photoPath: String
},
写的时候还发现一个问题,就是控制台报错The data property "photoPath" is already declared as a prop. Use prop default value instead.
意思是这个data的属性photoPath已经在prop声明了,使用prop默认的值替代。
这是因为我在父组件里因为创建声明photoPath,后面又在子组件的data声明和初始化photoPath,导致了冲突。只要把在子组件的data里定义的photoPath删掉就好啦。
关于父子组件应该就是这些内容了,如果下次再有变化,可能就真的是我发现可以给子组件传值,让子组件调用接口了。