小程序中的插槽分析及父子组件间的几种通信方式(子组件与父组件间的通信)

本文介绍了微信小程序中的槽以及父子组件的几种通信方式，希望对你有所帮助！

今天我们就来看看小程序中的插槽和父子组件的通信，看看和vue有什么区别？【相关学习推荐:小程序开发教程】

一.槽位1。什么是插槽？

在定制组件的wxml结构中，可以提供一个节点(插槽)来托管由组件用户提供的wxml结构。

其实槽，通俗地说就是子组件挖坑，父组件填坑的过程。当父组件使用子组件时，它决定子组件内部的一些布局显示。

子组件挖洞，父组件用组件标签中间的内容填充洞。2.单翼缝

在小程序中，默认情况下，每个自定义组件中只允许有一个插槽占位符，称为单个插槽。

默认情况下，当组件的wxml中只有一个槽需要使用多个槽时，可以在组件js中声明启用。注意:小程序目前只有默认槽和多槽，暂时不支持作用域槽代码如下(举例):

lt！--元件的封装器-->: lt；view class = 包装 gt lt视图 gt下面是组件的内部节点: ltslot gt lt/slot gt； lt/view gt； lt！--组件--的用户: ltcomponent -tag -name gt； lt！--这部分将放在组件中: lt视图 gt下面是插入到组件槽中的内容

在applet的自定义组件中，当需要使用多个插槽时，可以在。组件的js文件。

代码如下(示例):

component({ options:{ multiple slots:true//定义组件时在选项中启用多插槽支持}，属性:{/*...*/}，方法:{/*...*/}}) 4.定义多个插槽。

中可以使用多个标记。一个组件的wxml，以区分不同的插槽和不同的名称。

代码如下(示例):

lt！--组件模板-->: lt；view class = 包装 gt lt！--名称是第一个插槽--before >: lt；插槽名称= 之前 gt lt/slot gt； lt视图 gt这是一段固定的文字: lt插槽名称= 在 gt lt/slot gt； lt/view gt；二。亲子组件沟通1。父子组件通信模式

属性绑定用于父组件将数据设置为子组件的指定属性，并且只能设置JSON兼容的数据(只能传递数据，不能传递方法)。

子组件使用事件将数据传递给父组件，任何数据(包括数组和方法)都可以被传递。

获取组件实例父组件也可以通过this.selectComponent()获取子组件实例对象，这样就可以直接访问子组件的任何数据和方法。

2.属性绑定

传递数据属性绑定用于将值从父级传递到子级，只能传递常用类型的数据，不能将方法传递到子组件。代码如下(示例):

//父组件的数据节点数据:{ count:0 }//父组件的wxml结构< my-test 3 count = ；{ { count } } gt lt/my-test3 gt； lt视图 gt~ ~ lt/view gt； lt视图 gt在父组件中，计数值为:{ { count } } </view gt；接受数据子组件，在属性节点中声明相应的属性，并使用以下代码(示例):

//properties子组件的节点属性:{count: number}//wxml子组件的结构< text gt在子组件中，计数值为:{ { count } } </text gt；3.事件绑定的核心实现步骤

事件绑定用于将值从子节点传递到父节点，可以传递任何类型的数据。使用步骤如下:

在父组件的js中，定义一个函数，该函数将以自定义事件的形式传递给子组件。在父组件的wxml中，引用步骤1中定义的函数，通过调用this . trigger event( # 39；自定义事件名称 # 39；，{/* parameter object */})，将数据发送给父组件。在父组件的js中，通过e.detail 4获取子组件传递的数据。事件绑定的核心实现代码。

第一步:在父组件的js中，定义一个函数，该函数将以自定义事件的形式传递给子组件代码，如下(示例):

syncCount方法在父组件中定义。//以后这个方法会传递给子组件让子组件调用sync count(){ console . log( # 39；同步计数 # 39；)}，步骤2:在父组件的wxml中，将步骤1中定义的函数引用以自定义事件的形式传递给子组件代码，如下(示例):

lt！--使用bind:自定义事件名(推荐:清除结构)-->: lt；my-test3 count = ；{ { count } } bind:sync = ；同步计数 gt lt/my-test3 gt； lt！--或者直接协商绑定--后的自定义事件名称>: ltmy-test3 count = ；{ { count } } bindsync = 同步计数 gt lt/my-test3 gt；第三步:在子组件的js中，调用this . trigger event( # 39；自定义事件名称 # 39；，{/* parameter object */})，向父组件发送数据的代码如下(示例):

//子组件的wxml结构在子组件中，计数值为:{ { count } } </text gt； lt按钮类型= 主要 bindtap = 添加计数 gt+1 lt；/button gt；//子组件中的js代码方法:{ add count(){ this . setdata({ count:this . properties . count+1 })this . trigger event( # 39；同步 # 39；，{ value:this . properties . count } } }第四步:在父组件的js中，通过e.detail获取子组件传递的数据代码如下(示例):

同步计数(e){//console . log(e . detail . value)this . setdata({ count:e . detail . value })} 5。使用selectComponent获取组件实例

父组件如何获取子组件实例？

您可以调用this . select component( ；或id类选择器”)来获取子组件的实例对象，从而直接访问子组件的任何数据和方法。选择器，如this . select component( ；. my-组件 )

代码如下(示例):

// wxml结构< my-test3 count = ；{ { count } } bind:sync = ；同步计数 class = customA id = cA gt lt/my-test3 gt； ltbutton bindtap = getChild gt获取子组件实例

这几篇文章你可能也喜欢：

• applet中插槽与父子组件通信的几种方式分析（applet的父组件改变子组件的属性）

本文由主机参考刊发，转载请注明：小程序中的插槽分析及父子组件间的几种通信方式(子组件与父组件间的通信) https://zhujicankao.com/76430.html