首页 > 其他 > 详细

dialog采用子组件 与主页面分开写

时间:2021-05-11 17:21:34      阅读:9      评论:0      收藏:0      [点我收藏+]

这里以账户页面为例

新增账户的html部分和js部分全部挪到子组件 account-add.vue,取名为LcxAccountAdd

技术分享图片

 

 父组件,账户列表页面 account-list.vue 中引入子组件,并在 components 中注册子组件

技术分享图片

 

 

 页面中使用子组件

技术分享图片

父组件调用子组件方法

技术分享图片

 

 

子组件调用父组件方法

技术分享图片

 

 下面简单写下父子组件交互的三种方式

 1、$parent

this.$parent.fatherMethod();

2、$emit

<child @fatherMethod="fatherMethod"></child>
this.$emit(‘fatherMethod‘);

3、props

<child @fatherMethod="fatherMethod"></child>
props: {
fatherMethod: {
type: Function,
default: null
}
if (this.fatherMethod) {
this.fatherMethod();
}

三种方式的具体介绍:https://www.cnblogs.com/jin-zhe/p/9523782.html

 

dialog采用子组件 与主页面分开写

原文:https://www.cnblogs.com/LcxSummer/p/14754735.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!