19.uniapp组件通信兄弟组件传值

不念不忘少年蓝@ 2023-01-13 10:22 424阅读 0赞

**一.首先有首页：index.vue**

<template>
    	<view class="content">
    		<testA></testA>
    		<testB></testB>
    	</view>
    </template>
    
    <script>
    	// ab组件
    	import testA from '../../components/test/test-a.vue'
    	import testB from '../../components/test/test-b.vue'
    	
    	export default {
    		components:{
    			testA,
    			testB,
    		},
    </script>
    
    <style>
    </style>

**二.test-a组件**

<template>
    	<view>
    		
    		这是a组件 ：<button @click="addNum">修改b组件的数据{
       {num}}</button>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				num:0,
    			}
    		},
    		methods:{
    			addNum(){
    				uni.$emit('updateNum',10)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

**三.test-b组件**

<template>
    	<view>
    		这是b组建的数据{
       {num}}
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				num:0
    			}
    		},
    		created() {		//	uni.$on(eventName,callback)		监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
    			uni.$on('updateNum',num => {		// num 传过来的		//	updateNum 自定义事件名字
    				this.num += num					// 加多少就等于多少
    			})
    		}
    	}
    </script>
    
    <style>
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件通信（父子组件传值）

1、父组件传值子组件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

偏执的太偏执、/ 2023年07月19日 15:27/ 0 赞/ 90 阅读

相关详解React组件通信（父传子、子传父、兄弟组件传值）

1、父组件传值子组件 React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图： ![480452-20200304193735358-925055

我就是我/ 2023年07月11日 11:03/ 0 赞/ 289 阅读

相关 Vue组件通信（父子组件传值，非父子组件传值）

主要是整理给自己用的一些面试常用题，这里记录一下vue组件间通信几种方式。父组件传值到子组件（父传子）先定义一个子组件，这里我在component文件夹里定义一个c

电玩女神/ 2023年06月23日 02:56/ 0 赞/ 177 阅读

相关 vue组件及组件传值

总结创建一个组件 Vue.component('组件的标签'，{ template: '模板内容' })

本是古典何须时尚/ 2023年02月22日 13:56/ 0 赞/ 25 阅读

相关 19.uniapp组件通信兄弟组件传值

一.首先有首页：index.vue <template> <view class="content"> <testA></testA>

不念不忘少年蓝@/ 2023年01月13日 10:22/ 0 赞/ 425 阅读

相关 Flutter 组件通信(父子、兄弟）

一，概述　　　　flutter一个重要的特性就是组件化。组件分为两种状态，一种是StatefulWidget有状态组件，一种是StatelessWidget无状态组件。

矫情吗；*/ 2022年12月25日 01:52/ 0 赞/ 410 阅读

相关 vue非父子组件、兄弟组件之间的传值通信

一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用`props`来显示的声明父组件传递的属性，例如：子组件： <!--这是子组件

快来打我*/ 2022年10月17日 00:48/ 0 赞/ 246 阅读

相关整理vue组件间传值方法（父子组件、兄弟组件）

重新整理记录一下vue组件间传值的方法，包括父传子、子传父、兄弟间互传。 1.父组件向子组件传值父组件通过自定义属性向子组件传值 <Children

﹏ヽ暗。殇╰゛Y/ 2021年11月01日 16:24/ 0 赞/ 371 阅读

相关 uniapp父子组件传值

父组件页面（parent.vue） <template> <view> <Child @out=out :backGround=backGr

灰太狼/ 2021年09月13日 15:54/ 0 赞/ 582 阅读

相关 vue 兄弟组件传值

在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现

た入场券/ 2021年09月04日 06:55/ 0 赞/ 438 阅读