组件之间的传值方式uni-app(包含父与子，兄与兄之间的传值)

素颜马尾好姑娘i 2023-01-12 15:57 91阅读 0赞

组件 demo测试：

<template>
    	<view>
    		<view>
    			这是测试组件{ { name}}
    			这是父组件传过来的数据{ { title}} 地址：{ { address}}
    			<button  type="warn" @click="sendNum">给父组件传值</button>
    		</view>
    		 
    	</view>
    </template>
    
    <script>
    	export  default{ 
    		data(){ 
    			return{ 
    				name:"zhangsan",
    				intId:null,
    				num:10
    			}
    		},
    		props:['title','address'],
    		beforeCreate() { 
    			console.log("实例已经开始初始化了,不能拿到数据 ，顺序4",this.name)
    		},
    		created() { 
    			console.log("初始化完成，可以拿到数据 ，顺序5",this.name);
    			this.intId=setInterval(()=>{ 
    				console.log("执行定时器");
    			},1000)
    		},
    		beforeMount() { 
    			console.log("还未挂载，获取不了属性 ，顺序6");
    		},
    		mounted() { 
    			console.log("挂载完成，可以拿到属性 ，顺序7");
    		},
    		destroyed() { 
    			console.log("组件销毁");
    			clearInterval(this.intId);
    		},
    		methods:{ 
    			sendNum(){ 
    				console.log("给父级传值");
    				this.$emit("myEvent",this.num);//触发当前事列上的事件，可以进行传值
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

兄弟组件：

<template>
       <view>
    	   这是a组件：<button  @click="addnum">修改b组件的数据</button>
       </view>
    </template>
    
    <script>
    	export  default{ 
    		data(){ 
    			return{ 
    				 
    			}
    		},
    		methods:{ 
    			addnum(){  
    				uni.$emit("updateNum",12);//接收传递过来的数据
    			}
    		}
    		
    	}
    </script>
    
    <style>
    </style>

<template>
    	<view>这是b组件的数据：{ { number}}</view>
    </template>
    
    <script>
    	export  default{ 
    		data(){ 
    			return{ 
    				number:0
    			}
    		},
    		created() { 
    			//监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
    			uni.$on("updateNum",num=>{ 
    				console.log(num)
    				this.number=num
    			})
    		}
    	}
    </script>
    
    <style>
    </style>

进行测试：

<template>
    	<view>
    	<demo_test  v-if="flag" :title="title"  :address="address"  @myEvent="getNum"></demo_test> 
    		 <button type="primary"  v-on:click="checktest">切换test组件</button>
    		 <text v-if="num!=0">这是组件传过来的值{ { num}}</text> 
    		 <test_a></test_a>
    		 <test_b></test_b>
    	</view>
    	
    </template>
    
    <script>
    	import test  from  "@/components/test/demo_test.vue"
    	import testa  from  "@/components/test/a.vue"
    	import testb  from  "@/components/test/b.vue"
    	  export  default{ 
    		  data(){ 
    			  return{ 
    				  flag:true,
    				  title:"uni-app",
    				  address:"北京城",
    				  num:0
    			  }
    		  },
    		  onLoad(pages) { 
    		  	console.log("页面加载了 ，顺序2"+pages)
    		  },
    		  onShow() { 
    		  	console.log("页面显示了 ，顺序3")
    		  },
    		  onReady() { 
    		  	console.log("页面初次渲染完成了 ，顺序8");
    		  },
    		  onHide() { 
    		  	console.log("页面被隐藏了，顺序1");
    		  },
    		  methods:{ 
    			  checktest(){ 
    				  this.flag=!this.flag;
    			  },
    			  getNum(num){ 
    				  console.log(num); 
    				  this.num=num;
    			  }
    		  },
    		  components:{ 
    			  "demo_test":test,
    			  "test_a":testa,
    			  "test_b":testb
    		  }
    		  
    	  }
    </script>
    
    <style>
    </style>

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20210415024653428.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/2b1d39dd3ae149629345f817ec3fa6cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/e52ebb5b78384cfe88b368bba3839db6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221022/ae8ab8fb5a584f60aeb3deb58a0a20b5.png
[20210415024653428.png]: /images/20221022/284f83f5fbfd4087bf54b83a9887a380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]: /images/20221022/f3f6e45b58a94a68b246aaa86d5b83d6.png