uni-app组件传值

目录

一.父组件给子组件传值

父组件: elementFather.vue

子组件: element.vue

效果图 

 二.子组件给父组件传值

子组件: element.vue

父组件: elementFather.vue

效果图

三.兄弟组件之间传值

a.vue

b.vue

父组件:elementFather

效果图

---

一.父组件给子组件传值

1. 在父组件elementFather.vue里面定义了title:"father!"
2. 在子组件中通过props来接收
3. 子组件接收到父组件传递过来的值以后,可在页面显示

     注意:若在子组件中同时定义title则会发生冲突 

父组件: elementFather.vue

(使用了components里面定义的组件的页面,用了element.vue)

子组件: element.vue

效果图 

 二.子组件给父组件传值

1. 在子组件中通过$emit方法给父组件传值$emit('myEven',this.title) $emit('方法名字',参数名)
2. 在父组件中通过@myEven方法接收数据

子组件: element.vue

父组件: elementFather.vue

效果图

三.兄弟组件之间传值

1. 定义兄弟组件a和b
2. 通过uni.$on监听全局的自定义事件
3. 通过uni.$emit触发全局的自定义事件

a.vue

b.vue

父组件:elementFather

效果图