uni.app子组件调用父组件的方法并传递数据
$refs
子组件
模板
按钮点击我/按钮
/模板
脚本
导出默认值{
methods: {
发出事件(消息){ 0
console.log('接收的数据-(消息)//接收的数据-我是父组件中的数据
}
}
}
/script
父组件
模板
差异
child-a ref='child'/child-a
!-用裁判员给子组件起个名字-
按钮@click='getMyEvent '点击父组件/按钮
/div
/模板
脚本
从""导入儿童a ./components/child.vue '
导出默认值{
组件: {
儿童a
},
数据(){ 0
返回{
msg: '我是父组件中的数据'
}
},
methods: {
getMyEvent(){ 0
这个参考文献。孩子。发出事件(这。味精);
//调用子组件的方法孩子是上边裁判员起的名字,emitEvent是子组件的方法。
}
}
}
/script
$emit
子组件
模板
按钮@click='emitEvent '点击我/按钮
/模板
脚本
导出默认值{
数据(){ 0
返回{
msg: '我是子组件中的数据'
}
},
methods: {
发出事件(){ 0
这个$emit('my-event ',this.msg)
//通过按钮的点击事件触发方法,然后用$emit触发一个我的活动的自定义方法,传递这个。味精数据。
}
}
}
/script
父组件
模板
差异
child-a @ my-event=' getMyEvent '/child-a
!-父组件中通过监测我的活动事件执行一个方法,然后取到子组件中传递过来的值-
/div
/模板
脚本
从""导入儿童a ./components/child.vue '
导出默认值{
组件: {
儿童a
},
methods: {
getMyEvent(msg){ 0
console.log('接收的数据-(消息)//接收的数据-我是子组件中的数据
}
}
}
/script
第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法
子组件
模板
差异
按钮@click='childMethod()'点击/按钮
/div
/模板
脚本
导出默认值{
props: {
父方法: {
类型:功能,
默认值: null
}
},
methods: {
子方法(){ 0
如果(这个。父方法){ 0
这个。父方法();
}
}
}
};
/script
父组件
模板
差异
子项:父方法='父方法'/子项
/div
/模板
脚本
从" ~/组件/坝/子"导入子项;
导出默认值{
组件: {
儿童
},
methods: {
父方法(){ 0
console.log('测试');
}
}
};
/script
具体方法查看:
https://www.cnblogs.com/hanli-you/p/8011719.html
https://www.cnblogs.com/jin-zhe/p/9523782.html
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/116863.html