简单地分析了微图和亲子成分中插槽之间的某些通信方法（微型图的父组成部分将值传递给子组件）

本文介绍了微信迷你计划中的几种方法与父子组件之间的交流方式。我希望它对每个人都有帮助！

今天，您是否查看了小插槽和迷你程序的亲子组件之间的通信，看看有什么区别和vue？ [相关学习建议：迷你计划开发教程]

1。什么是插槽？

自定义组件的WXML结构允许节点（插槽）托管组件用户提供的WXML结构

插槽变得更加普遍。这是挖掘儿童组件中孔和填充父部件中孔的过程。 当父组件使用子组件时，它确定子组件中的布局。

儿童组件通过在组件标签的中心挖掘内容来填充孔。

2。单插槽

applet默认情况下仅允许每个自定义组件一个插槽。此限制称为单个插槽。

默认情况下，如果组件中只有一个需要多个插槽的wxml插槽，则可以在组件JS中声明它以吸引注意力。当前，该应用程序仅具有默认插槽和多个插槽，并且由于时间而不支持示波器插槽。这是代码（示例）：

！ - -组件包装器- -视图这是视图组件/视图的内部节点！组件-组件-标签-名称！ - -内容的这一部分位于组件插槽- -视图上。启动多个插槽

applet中的自定义组件需要运行插头对于插槽，代码是组件的.js文件（示例）：

component（{选项：{promptleslots：true //如果您启用了具有选项的多个插槽，则如果您支持组件定义属性：{/*.../}，方法：{//}。区分不同名称的不同插槽

代码为： /view！ - -名称是- -插槽/插槽/View2之后的第二个插槽插槽。亲子成分交流

1。父母 - 孩子组件通信方法

属性绑定用于将数据设置为父组件的指定属性，允许您仅设置JSON兼容数据（您只能传递数据而不是方法）

事件绑定用于将数据绑定用于将数据传递给父母组件，并且可以传递任何数据。 this.SelectComponent（）。 Allows direct access to data and methods of child components

2. Attribute bindings

Attribute bindings are used to implement parental pass values ​​to children, and can only pass data of normal type, and cannot pass methods to child components

Code is as follows (example):

// Data Node Data of Parent Component: {count: 0 // - test3/my - test3 viewThe nt values ​​are: {{{count}}/view

A child component declares the corresponding property of the property node and uses the code as follows (example):

//Child component property properties: {count: number //Wxml structure of child component child component child component child component child component child component child component core implementation procedure

Event binding is used to implement the value passed给父母的孩子，允许您传递任何类型的数据。 要使用：

在父组件的JS中，定义函数。此功能以自定义事件的形式传递给父部件的WXML子组件。通过自定义事件格式，步骤1中定义的函数是指子组件JS的子组件。 By calling this.triggerevent('custom event name', {/ *parameter object */}), the data is sent to the js of the parent component of the parent component, and the data passed by the child component is retrieved in e.detail

4. Event Binding Core Implementation Code

Step 1: In the JS parent component in this article, define the functions passed to the child components in the form of custom events.这是代码（示例）：synccount（）{console.log（'synccount'）}，第2步：在父组件的wxxml中，请参阅步骤1中定义的函数，以自定义事件的形式将代码传递给子组件，然后将函数定义的函数传递给子女组件（示例）（示例）（示例）：

！ - -我的- test3 /我的- test3！ -在-或绑定- -我的- test3 /my - test3之后立即协商自定义事件名称步骤3：在儿童组件的js中，将数据发送到父级的

代码如下（示例）：

//子一个子组件的wxxml结构，计数值如下：+1}）this.triggerevent（'triggerevent（'sync'，sync'，{value：properties.chirties.croperties.corperties.corments is and comments js ysements js ysements js ysements js n e js n e js n of js n of js n e js js n：ks of js n：k in of js n：通过e.detail检索。 Here's the code (example):

synccount(e) {// console.log(e.detail.value) this.setdata({count:count:e.detail.value}

5. Get component instance using select component

selector) You need to get the instance object of the child component and access the data and methods of the child component directly. instance/button getChild（）{//点击按钮的事件处理功能//请记住，您无法传递以下参数：null const child = this.selectComponent（'。customa'）// ID选择器#ca child.setdata（{count：child.properties.count+1}）//您还可以调用子组件的setData方法。 呢

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

• 如何更改Windows 10中的默认浏览器
• 请逐步告诉我如何使用微信小组中的Canvas+Painter插件创建QR码（微型图创建QR码）
• 对迷你计划开发实践的简单分析是如何获取手机号码（迷你程序的过程以获取手机号码）
• 详细说明微信官方帐户网页的批准说明（登录以进行官方帐户批准是否存在问题）
• 如何打开微信视频帐户（如何输入微信视频帐户的展示柜窗口）

本文由主机参考刊发，转载请注明：简单地分析了微图和亲子成分中插槽之间的某些通信方法（微型图的父组成部分将值传递给子组件） https://zhujicankao.com/146368.html