vue 子组件调用父组件方法、值(父传子);父组件调用子组件方法、值(子传父)。
vue 子组件调用父组件方法、值(父传子);父组件调用子组件方法、值(子传父)。
·
一、子组件调用父组件方法(父传子-方法)
场景:子组件是弹出框组件。当点击确定时,将新增的值增加到父组件的列表。就要调用父组件的getLIst()方法。
代码:
//父组件 利用@子组件方法名="父组件方法名",实现父传子-方法
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
@getList="getList"></add-follow-record>
/** 查询列表 */
getList() {
incrementDetail(this.incrementId).then(response => {
this.incrementIdData = response.data;
})
},
//子组件 调用新增接口时,利用this.$emit('方法名')方法,来调用父组件的方法
/** 新增对话框 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (!valid) {
return;
}
this.$set(this.form, 'incrementId', this.incrementId)
// 添加的提交
incrementFollowCreate(this.form).then(res => {
if (res.data !== null) {
this.$modal.msgSuccess('已添加一条跟进记录!');
this.$emit('toggleDialog')
this.reset();
//调用父组件获取列表接口方法
this.$emit('getList')
}
})
});
},
二、子组件调用父组件值(父传子-值)
场景:场景如上,当在父组件点击新增时,需要将open传递给子组件,但是子组件不能直接修改父组件的值,这就需要使用props传递。
代码:
//父组件 利用:子组件定义的值='父组件值',实现父传子-值
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
@getList="getList"></add-follow-record>
data(){
// 是否显示弹出层
open: false,
}
//子组件 子组件通过props接收父组件传递过来的值
<el-dialog title="" :visible.sync="open" width="35%"></el-dialog>
//props有两种写法
//法一:
props:['open']
//法二:
props: {
open: {
type: String,//数据类型
required: true//默认值
},
}
三、父组件调用子组件方法/值(子传父-方法/值)
场景:场景如上,(1)当点击新增时,已经输入值,但是不点击确定,点击取消之后输入框还有值,这时候就需要在点击新增的时候,清空输入框的值。
(2)父组件想要获取到子组件的某个值并使用。
代码:
//父组件 父组件中添加ref属性,这样就可以获取子组件的dom的方法或值
<add-follow-record :open="open" :cancel="cancel" @toggleDialog="cancel" ref="followRecord"
@getList="getList"></add-follow-record>
/** 打开对话框 */
addFollowRecord() {
this.open = true;
//利用this.$refs.ref名称.子组件方法名可以调用子组件的方法(子传父-方法)
this.$refs.followRecord.reset()
//利用this.$refs.ref名称.子组件值可以将子组件的值赋值给父组件(子传父-值)
this.msg = this.$refs.followRecord.message
},
//子组件
data(){
message:'子组件数据'
}
/** 表单重置 */
reset() {
this.form = {
...
};
this.resetForm("form");
},
更多推荐
所有评论(0)