如何在uni-app项目中实现多个自定义vue子组件与父vue页面之间传递参数

范例项目结构如下：

父页面chat/chat.vue代码如下：

子组件components/uni-chat-user-list.vue代码如下：

子组件components/uni-chat-room.vue代码如下：

请自行随便下载3张图片替换1.png、2.png、3.png作为头像图标，大图片也可以演示效果如下图所示：

我们再来看看另外一种传参方式来实现上面的同样的范例 ：

从父页面中以 this.refs.ref名称.子组件data中定义的属性名称 = 参数值的方式传值到子组件data中定义的属性名称

父页面chat/chat.vue代码如下：

子组件components/uni-chat-user-list.vue代码如下：

子组件components/uni-chat-room.vue代码如下：

 

我们再来看看另外一种传参方式来实现上面的同样的范例（简化版代码） ：

从父页面中以 this.refs.ref名称.子组件data中定义的属性名称 = 参数值的方式传值到子组件data中定义的属性名称

父页面chat/chat.vue简化版代码如下：

子组件components/uni-chat-user-list.vue简化版代码如下：

子组件components/uni-chat-room.vue简化版代码如下：

更多传参方式请参考官网范例，地址如下：

https://uniapp.dcloud.io/use-weex?id=nvue-和-vue-相互通讯