uni-app 组件传值

uni-app中的组件之间的传值

我们将compontents中的test文件作为子组件 引入到index中使用

引入并使用

效果如下

父传子

• 首先我们在父组件中使用子组件的标签中去自定义title
  

• 在子组件中 通过props去接收并处理
  
  效果如下：
  

子传父

子组件中

• 设置一个按钮 并注册点击事件
• 在点击事件中我们通过$emit 方法调用自定义事件 参数一为自定义事件名称 参数二为传递的参数 在这里就是data数据中定义的name

父组件中

• 在使用子组件的上面去定义一个自定义事件并绑定函数
• 在函数中去接收参数并赋值给data中的name
• 渲染页面

效果如下：

点击按钮后

非父子组件传值

我们定义aa和bb两个组件并且同时引入index中

aa组件

bb组件

效果如下：

要求点击aa组件中的按钮 将bb组件中的666改为999

bb组件中

• 我们在b组件中定义一个全局的自定义事件,自定義事件要定义在created中 其他组件才能获取到
• 通过nui.$on 第一个参数为自定义事件名 第二个参数为 被触发的函数

aa组件中

• 我们通过为按钮注册点击事件
• 在事件中通过uni.$emit触发全局的自定义事件updateNum并传递参数

效果如下：

点击后