小程序的父子组件传参以及插槽详解

最新推荐文章于 2024-07-22 08:44:50 发布

大雾四时起

最新推荐文章于 2024-07-22 08:44:50 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

文章标签：小程序

本文链接：https://blog.csdn.net/qq_45666837/article/details/118114156

本文详细介绍了小程序中组件的父子交互，包括父组件向子组件传递数据、子组件向父组件触发事件，以及如何利用插槽实现内容分发。通过实例展示了在组件的wxml和js文件中如何编写代码，以及在父组件中如何调用和响应子组件的方法。同时，还讲解了匿名插槽和具名插槽的使用，并强调在组件定义时启用多slot支持的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建一个 Component

创建两个空的文件夹, 开发者工具中鼠标右键其中一个文件夹 ,选择 新建 Component,比如我这里新建一个 index
在这里插入图片描述

子组件

在 demo-1里面的 index.wxml中写

<view>
  <button type="primary"  bindtap="clickFn">接收父组件的值</button>
</view>

在 demo-1里面的 index.js中写

Component({
  /**
   * 组件的属性列表
   */
  properties: {
 //  给父组件默认值
    myvalue:{
      type:String,
      value:默认值,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickFn(){
      this.setData({
        myvalue:"修改的值"
      })
    }
  }
})

在 demo-2 中的 index.wxml中写自定义组件

<view>
	{{myevent}}
   <button type="primary"  bindtap="fn">子组件触发父组件方法</button>
</view>

在 demo-2的index.js中

Component({
    properties: {
 
    },
    data: {
 
    },
    methods: {
    	fn(){
			this.triggerEvent("myevent","参数")
		}
    }
})

在父组件调用子组件

父组件中 json 文件中写自定义组件名

{
  "usingComponents": {
  "my-component":"/components/demo-1/index",
  "my-components":"/components/demo-2/index"
  }
}

{
  "usingComponents": {"my-component":"/components/demo-1/index"}
}

父组件当中的 wxml中写自定义组件

<view>
	<my-component  title="{{myevent}}"></my-component>
	<my-components myvalue="哈哈" bind:myevent="myevent"></my-components>
</view>

父组件的 js 文件

Page({
	data: {

 	},
 	myevent(e){
    console.log(e.detail);
  },
})

父组件调用子组件

父组件通过动态绑定title属性,通过 this.setDate获取父组件传过来的值

子组件调用父组件方法

在子组件deme-2里触发自定义的fn方法，通过 this.triggerEvent 传入在父组件中接收数据的事件名(“event”)和要接收的数据(‘子组件的数据’)，然后在父组件绑定事件event，如上例中的 bindmyevent=“myevent” ，然后在父组件里的clickFn方法里就可以接受子组件传过来的数据了。

插槽

插槽分为 匿名插槽 跟 具名插槽

匿名插槽

在组件的 wxml 中定义匿名插槽

<view>
    <slot></slot>
</view>

在小程序页面中wxml使用

<view>
	<my-component>
	  <view>我是匿名插槽的内容</view>
	</my-Component>
</view>

具名插槽

在组件的 wxml 中定义匿名插槽

<view>
	<!-- 匿名插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="mySlot"></slot>
</view>

在小程序页面中wxml使用

<view>
  <my-component>
    <!-- 匿名插槽 -->
    <view>我是匿名插槽的内容</view>
    <!-- 具名插槽 -->
    <view slot="mySlot">我是具名插槽</view>
  </my-component>
</view>

注意:这里把组件当中的 slot注掉后,具名插槽也显示不出来,所以还需要在组件的 js中配置一个属性

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
	
  },
  data: {

  },
  methods: {
  
  }
})

总结

组件当中就是父传子,子传父,合理运用,多加练习,最后感谢大家的支持!