微信小程序：双层嵌套自定义组件如何传递数据给父组件及数据更新处理

最新推荐文章于 2024-09-16 15:08:31 发布
置顶 最新推荐文章于 2024-09-16 15:08:31 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： 小程序 双层嵌套自定义组件 文章标签： 小程序 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JCec_Xian/article/details/108470423
版权
本文介绍了在微信小程序中处理双层嵌套自定义组件数据传递的问题，包括父组件如何将数据传递给子组件，子组件如何通过自定义事件回传数据给父组件，并详细阐述了数据更新的处理方式，特别是在组件内部利用observer监听数据变化来实现动态更新。
摘要由CSDN通过智能技术生成

双层嵌套自定义组件传递数据以及数据更新处理

总体概述

在偶然，开发一个日历小程序时，在使用了ColorUI的框架下，布局上日历放在小程序标题，因为ColorUI的fixed无法精确获取日历（可展开与隐藏）高度问题。因此采用了双层嵌套组件。实现图如下：
在这里插入图片描述
在这里插入图片描述
下面看wxml代码结构布局
index.wxml引用colorUI框架中的cu-custom
在这里插入图片描述
cu-custom.wxml引入我自己写的自定义组件calendar
在这里插入图片描述

代码实现传递数据

好，在了解完布局直接进入主题

父组件传递给子组件

在index.wxml上将获取的事件数据{ {event_list}}传递到cu-custom的properties的对象数据中


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  JCec_Xian
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
微信小程序 - wx:for 循环渲染多个 “重复“ 子组件（仅子组件 id 不同，this.selectComponent 使用时依然能准确找到子组件）将子组件 id 设为动态每个子组件都是独立的！

				
			

			

				

					王佳斌
				

				

					02-21
					
					2673
					
				

			

		

		

			
				
微信小程序 子组件id 怎么是变量，微信小程序中 selectComponent的使用(wx:for组件内使用id)，微信小程序循环渲染子组件，微信小程序如何让组件的id变成动态的，微信小程序怎么将循环体内插入子组件，微信小程序把组件id设为动态,然后用selectComponent再找到微信小程序子组件的id如何绑定变量，微信小程序将子组件设置动态id后，父组件怎么 selectComponent调用呢，循环数组wx:for中使用this.selectComponent获取子组件，微信小程序 父组件循环使

			
		

	



                

            
              



	

		

			

				
					
微信小程序如何实现组件之间的数据传递？

				
			

			

				

					知码客
				

				

					08-20
					
					838
					
				

			

		

		

			
				
通过以上方法，你可以在微信小程序中实现组件之间的数据传递。选择合适的数据传递方式可以提高代码的可维护性和可读性。父组件可以通过设置子组件的属性（properties）来传递数据。子组件可以通过触发自定义事件（events）来向父组件传递数据。

			
		

	



              


  
              

                


	

		

			

				
					
微信小程序组件参数传递

				
			

			

				

					12-11
				

			

		

		

			
				
本文档以简单清晰的逻辑业务帮助大家认识小程序中组件传递的使用，

			
		

	





	

		

			

				
					
小程序自定义组件嵌套

				
			

			

				

					Jester的博客
				

				

					12-05
					
					6679
					
				

			

		

		

			
				
小程序有一个需求：实现树形菜单，因为数据是动态的，所以页面没办法写死，想到了无限嵌套

组件的嵌套其实就是让自定义组件引用自身，然后页面直接使用该组件就可以

自定义组件的使用：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

 

1.自定义组件（树形菜单）


<view style...

			
		

	



		

			
		



	

		

			

				
					
小程序组件间通信

					
最新发布

				
			

			

				

					2202_75345049的博客
				

				

					09-16
					
					791
					
				

			

		

		

			
				
获取子组件的实例对象，就可以直接拿到子组件的任意数据和方法。子组件如果需要向父组件传递数据，可以通过小程序提供的事件系统实现传递传递，可以传递任意数据。与普通的 WXML 模板类似，使用数据绑定，这样就可以向子组件的属性传递动态数据。父组件如果需要向子组件传递指定属性的数据，在 WXML 中需要使用数据绑定的方式。1.在父组件 WXML 中使用 数据绑定 的方式向子组件传递动态数据。2.子组件内部使用 properties 接收父组件传递的数据即可。中的数据进行修改，但是一般不建议修改。

			
		

	





	

		

			

				
					
制作微信小程序组件

				
			

			

				

					马优晨
				

				

					12-21
					
					5920
					
				

			

		

		

			
				
对于我们日常中一些公共的东西可以封装成组件，然后在各个页面使用。对于小程序，我们也可以封装我们需要的一些公共的东西。这里我们讲解一个小插件。如上图所示，一个小插件，单击是展开，在单击关闭的时候，按钮关闭。页面的WXML  （APP.wxml）<template name="widget-dialog-iconList">
    <view class="com-widget-iconList {{

			
		

	





	

		

			

				
					
小程序组件和组件的嵌套之间的通信

				
			

			

				

					浩星
				

				

					10-29
					
					1249
					
				

			

		

		

			
				
前言：

   小程序中组件嵌套比较频繁的情况下，比如两个都是自定义组件，他们直接的嵌套通信应该如何做呢，小程序官网提供了这样的一套方法

（注：摘自官网，官网入口）

组件间关系

定义和使用组件间关系

有时需要实现这样的组件：


<custom-ul>
  <custom-li> item 1 </custom-li>
  <custom-li> item 2 </custom-li>
</custom-ul>


这个例...

			
		

	





	

		

			

				
					
小程序自定义组件的嵌套

				
			

			

				

					F19980825901的博客
				

				

					09-06
					
					522
					
				

			

		

		

			
				
小程序自定义组件的嵌套

			
		

	





	

		

			

				
					
微信小程序 自定义组件的数据传递 父组件子组件传递值

				
			

			

				

					seve_nnight的博客
				

				

					08-09
					
					1130
					
				

			

		

		

			
				
1.父组件向子组件传递数据
parent.wxml


<my-component name="{{name}}" age="{{age}}"></my-component>


parent.js


data: {
  name: 'Peggy',
  age: 25
}


child.js


properties: {
  name: {
    type: String,
    value: '小明'
  },
  age: Number
}


父组件向子组件传值以属

			
		

	





	

		

			

				
					
[微信小程序]微信小程序学习(五)——自定义组件，父子组件传递数据

				
			

			

				

					iChangebaobao的博客
				

				

					04-19
					
					345
					
				

			

		

		

			
				
一、创建组件

在根目录新建文件夹 components，在微信开发者工具中，在文件夹 components上点击右键，选择新建Component，创建组件。
为了方便区分组件，建议在 components下用文件夹myHeader存放所有文件，用来区别多个组件


二、使用组件
例如：在页面 index 中使用
//index.json
"usingComponents": {
    "myH...

			
		

	





	

		

			

				
					
微信小程序-自定义组件-子向父传递数据

				
			

			

				

					汪汪的博客
				

				

					02-01
					
					2521
					
				

			

		

		

			
				
微信小程序-自定义组件-子向父传递数据
新建文件Tabs

Tabs.js
// components/Tabs/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    // 要接收的数据的名称
    aaa:{
      // type 要接收的数据的类型
      type:String,
 ...

			
		

	





	

		

			

				
					
微信小程序:组件间的传值

				
			

			

				

					湾流~  的博客
				

				

					02-22
					
					2405
					
				

			

		

		

			
				
组件间的传值
子传父
子组件页
使用triggerEvent方法第一个参数为自定义事件名称,第二个想要传递到父页面的值
this.triggerEvent('quitEvent',e.detail.value);

父组件页
在父页面通过事件名绑定一个新方法gainedValue
<quit id="quit" bind:quitEvent="gainedValue"></quit>

父页面
gainedValue:function(e){
    console.log("子组件

			
		

	





	

		

			

				
					
微信小程序开发中的数据分享和数据传递

				
			

			

				

					qq_67153941的博客
				

				

					06-07
					
					425
					
				

			

		

		

			
				
在小程序中，数据的分享通常是指将数据分享给其他用户或者其他平台，而数据的传递则是指在小程序的不同页面或组件之间传递数据。在微信小程序中，可以使用全局变量的方式实现组件间的数据传递。例如，在app.js文件中定义一个全局变量，并在不同页面或组件中使用该变量。在微信小程序中，可以通过事件传递的方式实现组件间的数据传递。以上是微信小程序开发中的数据分享和数据传递的相关内容，通过代码案例进行了详细的说明。除了分享整个小程序，我们还可以分享某个页面的内容，例如分享一篇文章的标题和封面图。在页面或组件中，可以通过。

			
		

	





	

		

			

				
					
跟着JHipster学做项目 (13) 控制Vue前端在完成加载数据后展现页面

				
			

			

				

					java_augur的专栏
				

				

					09-26
					
					510
					
				

			

		

		

			
				
对于用Vue开发的前端页面，通常采用Ajax进行数据通讯，页面的控件往往存储在本地。我们直观的感觉是页面组件出现后，数据再显示在组件上，如果网络有延迟，数据滞后显示会更加明显。更严重的情况是上次缓存的数据会出现在页面，对用户造成困扰。

下面就讲述一下JHipster的两种方式实现数据加载完成后，再展现页面。

利用beforeRouteEnter，代码如下：


  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.initAu

			
		

	





	

		

			

				
					
微信小程序之首页圆形导航条

				
			

			

				

					weidong_y的博客
				

				

					06-18
					
					5086
					
				

			

		

		

			
				
1.效果图如下：



2.Github 项目源码下载：

https://github.com/yyzheng1729/wx_navigation.git

3.使用到了小程序的自定义组件 component，如果不会

用组件的话，可以把主要代码复制过去也行。

4.实现思路：

由于是两行导航栏按钮，如果采用到了数组+对象的方

法来实现，每一行就是一个数组，每一个按钮就是一个

对象。

...

			
		

	





	

		

			

				
					
微信小程序-自定义组件-父向子传递数据

				
			

			

				

					汪汪的博客
				

				

					02-01
					
					1957
					
				

			

		

		

			
				
微信小程序-自定义组件-父向子传递数据
新建文件Tabs

Tabs.js
// components/Tabs/Tabs.js
Component({
 /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    // 要接收的数据的名称
    aaa:{
      // type 要接收的数据的类型
      type:String,
  ...

			
		

	





	

		

			

				
					
微信小程序Picker组件能嵌套组件吗？

				
			

			

				

					weixin_42220130的博客
				

				

					04-23
					
					620
					
				

			

		

		

			
				
Picker可作为View使用 可以嵌套View、Text、Image等
如果Picker不显示，在Picker里面元素的外面嵌套一个Lable
<Picker>
	<Lable>
		<View></View>
		<Text></Text>
	</Lable>
</Picker>


...

			
		

	





	

		

			

				
					
微信小程序自定义组件传值 页面和组件相互传数据操作示例

				
			

			

				

					11-26
				

			

		

		

			
				
本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作。分享给大家供大家参考，具体如下：
要想在组件中调到页面中的方法，并且想要组件中传数据到页面去，emmmm，可以酱紫：
用组件事件 triggerEvent！
首先，在页面中定义组件 ，json文件中记得加上：

{
 "usingComponents": {
 "user-btn": "/pages/component/userInfo/userInfo"
 }
},

然后，index.wxml~
index.wxml

...
<user-btn show="{{userShow}}" bind:showTab="showT

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值