温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js小程序中插槽、父子组件通讯的方式有哪些

发布时间:2021-11-02 10:04:49 来源:亿速云 阅读:152 作者:iii 栏目:移动开发

本篇内容主要讲解“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小程序中插槽、父子组件通讯的方式有哪些”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI