本文介绍了如何在Vue.js应用中结合TypeScript，实现父页面通过Dialog弹窗打开子页面并传递值。首先在子页面（testson.vue）中，利用@Model和@Watch监听父页面传来的值以控制Dialog的显示，并在父页面中通过点击事件触发子页面的打开。接着讲解如何将父页面的rowId（值为123456）传递给子页面，通过@Prop接收并在子页面中使用。
首先，写一个子页面，比如就叫testson.vue。如图一所示。
1、@Model在这里提供给父页面绑定的值，对应父页面里的SonPageDialogVisible
2、第一个@Watch监听value值的变化，如果父页面改变了SonPageDialogVisible的值，那么value的值就会变化，变成true。这时子页面的dialogVisible属性值也变成了true。子页面就打开了。
3、第二个@Watch是子页面渲染数据，监听dialogVisible的变化。
然后在父页面中，如下图所示：
点击方法触发显示子页面。
以上为弹出子页面的步骤。子页面一般都是为表单或者列表。
--------------------------------------------------------------------------------------------------------------------------------
下面介绍如何在打开子页面的时候将父页面的某个值或某些值传给子页面。
1、假如在父页面中需要给子页面传一个rowId,值为123456，那么就在子组件上定义一个属性去接收这个rowId,这里我写成fatherId
最低0.47元/天 解锁文章
扫一扫
1591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
