uniapp 父子组件传值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 父子组件传值相关的知识,希望对你有一定的参考价值。

参考技术A 一、父组件向子组件传递数据(props)

child

parent

二、子组件向父组件传递数据(emit)

parent

child

三、子组件与父组件数据同步(.sync)

child

parent

微信小程序父子组件通信

参考技术A 用于父组件向子组件指定属性设置数据,无法将方法传递给子组件
实例:
父组件:
js中声明一个变量count

wxml
渲染父组件count

在父组件引用子组件,并进行属性绑定,把父组件count值传给子组件

子组件
在子组件的js中接收

子组件wxml中进行渲染

结果:

用于子组件向父组件传递数据,可以传递任意数据
子组件
触发加1按钮之后传递给父组件

父组件:
js
创建事件

wxml
绑定自定义事件

父组件通过this.selectComponent()获取子组件实例对象,可以访问子组件任意数据和方法
父组件进行调用时需要传入一个id或者class选择器
父组件
wxml

js

拿到子组件实例对象,直接为子组件进行赋值
修改父组件count值

以上是关于uniapp 父子组件传值的主要内容,如果未能解决你的问题,请参考以下文章

uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)

微信小程序父子组件通信

React 父子组件传值

父子组件传值的几种方式

Vue-Cli—04.父子组件传值祖孙组件传值兄弟组件传值

VUE父子组件之间的传值,以及兄弟组件之间的传值