uni.app 子组件调用父组件的方法并传递数据

技术uni.app 子组件调用父组件的方法并传递数据 uni.app 子组件调用父组件的方法并传递数据$refs子组件templatebutton点击我/button
/template
scripte

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

(0)

相关推荐

  • defer关键字、panic和recover的示例分析

    技术defer关键字、panic和recover的示例分析这篇文章给大家介绍defer关键字、panic和recover的示例分析,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。defer关键字def

    攻略 2021年11月30日
  • MySQL面试题有哪些

    技术MySQL面试题有哪些本篇内容介绍了“MySQL面试题有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!非关系型数

    攻略 2021年12月3日
  • mysql遇到不小心误删表怎么办

    技术mysql遇到不小心误删表怎么办这篇文章主要介绍了mysql遇到不小心误删表怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。测试环境:5.6.33

    攻略 2021年11月2日
  • 吃甘蔗的好处,听说吃甘蔗能洁牙

    技术吃甘蔗的好处,听说吃甘蔗能洁牙甘蔗味甘性寒吃甘蔗的好处,甘可滋补养血,寒可清热生津,故有滋养润燥之功效,那么甘蔗吃多了对牙齿好不好呢?下面就一起来看看吧
    1吃甘蔗对牙齿好吗
    吃甘蔗可以清洁牙齿,因此对牙齿有好处。甘蔗

    生活 2021年10月26日
  • 转换成MP3格式的软件都有哪些推荐2款实用的音频格式转换工具

    技术转换成MP3格式的软件都有哪些推荐2款实用的音频格式转换工具 转换成MP3格式的软件都有哪些推荐2款实用的音频格式转换工具我们在日常的办公生活中,或多或少会接触到音频文件,这些文件有可能是从网络上下

    礼包 2021年12月24日
  • 早餐有哪些,早餐应该吃什么东西比较好

    技术早餐有哪些,早餐应该吃什么东西比较好都说一年之计在于春早餐有哪些,一日之计在于晨,大家都知道早晨是充满活力的时候!一顿营养丰富的早餐也是非常重要的,尤其是对男性朋友!你们知道男性早餐吃什么最有营养吗,适合男人的早餐食

    生活 2021年10月27日