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)

相关推荐

  • int和Integer缓存的实现是怎样的

    技术int和Integer缓存的实现是怎样的今天就跟大家聊聊有关int和Integer缓存的实现是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。int相信我

    攻略 2021年11月24日
  • netcore5.0json反序列化(netcore如何在界面定义传输的json)

    技术.NET Core如何从project.json 到 .csproj构建配置文件.NET Core如何从project.json 到 .csproj构建配置文件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希

    攻略 2021年12月13日
  • 实践的名人例子,有关实践的名人事例50字

    技术实践的名人例子,有关实践的名人事例50字1、李时珍在年轻的时候就听人说,有一种神奇的植物叫曼陀罗,李时珍费 了一些周折,终于找到了这种植物,他为了探明究竟,亲自服下了曼陀罗,发现它有麻醉和使人兴奋的作用,少量可以治病

    生活 2021年10月21日
  • 香港服务器迁移网站要注意什么香港服务器租用

    技术香港服务器迁移网站要注意什么香港服务器租用将网站迁移到新的香港服务器需要大量规划。一些主要原因是磁盘空间不足、客户服务差以及服务器经常出现故障。起初,转向新的网络香港机房服务商可能看起来很棒,但实际上,不同的原因所需

    礼包 2021年11月3日
  • sql语句优化方法有哪些(sql优化常用面试题)

    技术SQL优化方法有哪些这篇文章主要讲解了“SQL优化方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“SQL优化方法有哪些”吧!一、避免进行null判断 应

    攻略 2021年12月22日
  • 美版鞋码对应中国鞋码,美国鞋号uk4是中国鞋号多少

    技术美版鞋码对应中国鞋码,美国鞋号uk4是中国鞋号多少首先说明UK是英国鞋码的代号美版鞋码对应中国鞋码,为英国的英文united kingdom的缩写,美国鞋码的代号是US码,为USA的缩写,UK4码相当于220码,欧码

    生活 2021年10月23日