VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

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

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

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

1.png

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

子组件挖洞,父组件用组件标签中间的内容填充洞。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获取子组件实例

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 小程序中的插槽分析及父子组件间的几种通信方式(子组件与父组件间的通信)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!