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

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

今天，我们来看看小程序中插槽和亲子组件之间的通信，看看与vue有什么不同。【相关学习推荐:小程序开发教程】

一、槽点1。什么是插槽？

在定制组件的wxml结构中，可以提供一个节点（插槽）来托管组件使用者提供的wxml结构。

实际上，用一种更通俗的方式来说，slot是由子组件挖洞并由父组件填充的过程。当父组件使用子组件时，它决定子组件内部的某些布局显示。

子组件通过挖洞来填充洞。父组件通过组件标签中间的内容填充孔洞。2.单槽。

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

默认情况下，组件的wxml中只能有一个槽。当需要使用多个插槽时，可以在组件js中声明它们已启用。注意:目前小程序中只有默认槽和多个槽，暂时不支持范围槽代码（示例）:

& lt！--组件--的打包员:& lt视图class = & quot包装& quot& gt& lt视图& gt这里是组件的内部节点；& ltcomponent-tag-name》& lt！--该零件将被放置在组件中

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

代码如下（示例）:

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

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

代码如下（示例）:

& lt！--构件模板--》；& lt视图class = & quot包装& quot& gt& lt！在--之前具有--名称的第一个插槽》& lt插槽名称= & quot之前& quot& gt& lt/slot & gt；& lt视图& gt这是固定的文本内容；& lt插槽名称= & quot在& quot& gt& lt/slot & gt；& lt/view & gt；二、父子成分交流1。父子组件通信模式

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

事件绑定用于子组件向父组件传递数据，任何数据（包括数组和方法）都可以传递。

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

2.属性绑定

传递数据属性绑定用于将值从父组件传递给子组件，它只能传递普通类型的数据，但不能将方法传递给子组件。代码如下（示例）:

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

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

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

在父组件的js中定义一个函数，该函数将以自定义事件的形式传递给子组件。在父组件的wxml中，以自定义事件的形式引用步骤1中定义的函数，并将其传递给子组件。在子组件的js中，调用this . triggerevent（‘自定义事件名称‘，{/*参数对象*/}）。在父组件的js中将数据发送给父组件，并通过e.detail 4将数据传递给子组件。事件绑定的核心实现代码。

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

//sync count方法在父组件中定义//将来，此方法将传递给子组件以供子组件调用sync count（）{ console . log（&；#39;同步计数和。#39;）}，步骤2:在父组件的wxml中，将步骤1中定义的函数引用以自定义事件的形式传递给子组件。代码如下（示例）:

& lt！--使用bind:自定义事件名称（推荐:清除结构）--& gt；& ltmy-test3计数= & quot{ { count } } & quot绑定:sync = & quot同步计数& quot& gt& lt/my-test3 & gt；& lt！--或直接协商绑定后的自定义事件名称--》；& ltmy-test3计数= & quot{ { count } } & quotbindsync = & quot同步计数& quot& gt& lt/my-test3 & gt；第三步:在子组件的js中，通过调用this . triggerevent（‘自定义事件名称‘，{/*参数对象*/}）将数据发送到父组件。代码如下（示例）:

//子组件的wxml结构《text》在子组件中，计数值为:{ { count } }《/text & gt；& lt按钮类型= & quot主要& quotbindtap = & quotaddCount&quot& gt+1 & lt；/button & gt；//子组件中的js代码方法:{ add count（）{ this . setdata（{ count:this . properties . count+1 }）this . triggerevent（&；#39;同步和同步。#39;，{value:这个。属性。count }）}第四步:在父组件的js中，获取通过e.detail传递给子组件的数据代码，如下所示（示例）:

sync count（e）{//console . log（e . detail . value）this . setdata（{ count:e . detail . value }）} 5。使用selectComponent获取组件实例。

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

您可以调用this . select component（& quot；Id或类选择器”）来获取子组件的实例对象，以便直接访问子组件的任何数据和方法。调用时，需要传入一个选择器，比如this . select component（“。my-component“）。

代码如下（示例）:

// wxml结构《my-test3 count = & quot；{ { count } } & quot绑定:sync = & quot同步计数& quotclass = & quotcustomA & quotid = & quotcA & quot& gt& lt/my-test3 & gt；& ltbutton bindtap = & quotgetChild&quot& gt获取子组件实例

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

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

本文由主机参考刊发，转载请注明：applet中插槽与父子组件通信的几种方式分析（applet的父组件改变子组件的属性） https://zhujicankao.com/107724.html