本篇内容主要讲解“js小程序中插槽、父子组件通讯的方式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js小程序中插槽、父子组件通讯的方式有哪些”吧!
一、插槽
1. 什么是插槽？
在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构
其实插槽, 说的通俗一些, 就是 子组件挖坑，父组件填坑 的过程。由父组件在使用子组件的时候, 决定子组件内部的某一些布局展示
子组件通过挖坑
父组件通过组件标签中间的内容来填坑
2. 单个插槽
在小程序中，默认每个自定义组件中只允许使用一个 slot 占位，这种个数上的限制叫做单个插槽
默认情况下，一个组件的
wxml中只能有一个slot需要使用多
slot时，可以在组件js中声明启用注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽
代码如下（示例）：
<!-- 组件的封装者 --><view class="wrapper"> <view>这里是组件的内部节点</view> <!-- 对于不确定的内容，可以使用<slot>进行占位，具体的内容由组件的使用者决定 --> <slot></slot></view><!-- 组件的使用者 --><component-tag-name> <!-- 这部分内容将被放置在组件<slot>的位置上 --> <view>这里是插入到组件slot的内容</view></component-tag-name>3. 启动多个插槽
在小程序的自定义组件中，需要使用多 插槽时，可以在组件的 .js 文件中
代码如下（示例）：
Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多 slot 支持 }， properties: { }, methods: { }})4. 定义多个插槽
可以在组件的 .wxml 中使用多个 标签，以不同的 name 来区分不同的插槽
代码如下（示例）：
<!-- 组件模板 --><view class="wrapper"> <!-- name 为 before 的第一个 slot 插槽 --> <slot name="before"></slot> <view>这是一段固定的文本内容</view> <!-- name 为 after 的第二个 slot 插槽 --> <slot name="after"></slot></view>二、父子组件通讯
1. 父子组件通讯方式
属性绑定用于父组件向子组件的指定属性设置数据，仅能设置
JSON兼容的数据(只能传递数据，不能传递方法)事件绑定用于子组件向父组件传递数据，可以传递任意数据(包括数组和方法)
获取组件实例父组件还可以通过
this.selectComponent()获取子组件实例对象这样就可以直接访问子组件的任意数据和方法
2. 属性绑定
传递数据属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件
代码如下（示例）：
// 父组件的 data 节点data: { count: 0}// 父组件的wxml 结构<my-test3 count="{{count}}"></my-test3><view>~~</view><view>父组件中，count值为：{{count}}</view>接受数据
子组件在 properties 节点中声明对应的属性并使用代码如下（示例）：
// 子组件的 properties 节点properties: { count: Number}// 子组件的 wxml 结构<text>子组件中，count值为：{{count}}</text>3. 事件绑定的核心实现步骤
事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：
在
父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件在
父组件的wxml中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件在
子组件的js中，通过调用this.triggerEvent('自定义事件名称', {})，将数据发送到父组件在父组件的
js中，通过e.detail获取到子组件传递过来的数据
4. 事件绑定的核心实现代码
步骤1： 在父组件的
js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
代码如下（示例）：
// 父组件中定义 syncCount 方法// 将来，这个方法会被传递给子组件，供子组件进行调用syncCount() { console.log('syncCount')},步骤 2：在父组件的
wxml中，通过自定义事件的形式，将 步骤 1 中定义的函数引用，传递给子组件
代码如下（示例）：
<!-- 使用 bind: 自定义事件名称(推荐：结构清晰) --><my-test3 count="{{count}}" bind:sync="syncCount"></my-test3><!-- 或在 bind 后面直接协商自定义事件名称 --><my-test3 count="{{count}}" bindsync="syncCount"></my-test3>步骤 3：在
子组件的js中，通过调用this.triggerEvent('自定义事件名称', {})，将数据发送到父组件
代码如下（示例）：
// 子组件的wxml结构<text>子组件中，count值为：{{count}}</text><button type="primary" bindtap="addCount">+1</button>// 子组件中的 js 代码methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {value: this.properties.count}) }}步骤 4：在父组件的
js中，通过e.detail获取到子组件传递过来的数据
代码如下（示例）：
syncCount(e) { // console.log(e.detail.value) this.setData({ count: e.detail.value })}5. 使用 selectComponent 获取组件实例
父组件如何获得子组件实例？
可在父组件里调用 this.selectComponent("id或class选择器")，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(".my-component")
代码如下（示例）：
// wxml结构<my-test3 count="{{count}}" bind:sync="syncCount" class="customA" id="cA"></my-test3><button bindtap="getChild">获取子组件实例</button>getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }到此，相信大家对“js小程序中插槽、父子组件通讯的方式有哪些”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
