미니 프로그램의 슬롯과 상위-하위 구성 요소 간의 여러 통신 방법에 대한 간략한 분석

이 글에서는 WeChat 애플릿의 슬롯과 부모-자식 구성 요소 통신의 여러 방법을 소개하겠습니다. 도움이 되길 바랍니다!

오늘은 미니 프로그램에서 슬롯과 부모-자식 컴포넌트 간의 통신에 대해 살펴보고, vue와 어떤 차이점이 있는지 살펴보겠습니다. [관련 학습 추천 :미니 프로그램 개발 튜토리얼]

1. 슬롯

1.

사용자 정의 구성 요소의wxml구조에서 구성 요소 사용자wxml结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的wxml结构

其实插槽, 说的通俗一些, 就是子组件挖坑，父组件填坑的过程。由父组件在使用子组件的时候, 决定子组件内部的某一些布局展示

• 子组件通过挖坑
• 父组件通过组件标签中间的内容来填坑

2. 单个插槽

在小程序中，默认每个自定义组件中只允许使用一个slot占位，这种个数上的限制叫做单个插槽

• 默认情况下，一个组件的wxml中只能有一个slot
• 需要使用多slot时，可以在组件js中声明启用
• 注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽

代码如下（示例）：

  这里是组件的内部节点       这里是插入到组件slot的内容 

3. 启动多个插槽

在小程序的自定义组件中，需要使用多 插槽时，可以在组件的.js文件中

代码如下（示例）：

Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多 slot 支持 }， properties: { /* ... */ }, methods: { /* ... */ } })

4. 定义多个插槽

可以在组件的.wxml中使用多个 标签，以不同的name

하위 구성 요소는 구멍을 뚫습니다

상위 구성 요소는 구성 요소 태그 중간에 있는 콘텐츠를 통해 구멍을 채웁니다

• JSON미니 프로그램에서는 기본적으로 각 사용자 정의 구성 요소에 하나의슬롯자리 표시자가 허용됩니다. 이 수 제한을 단일 슬롯이라고 합니다.

• 기본적으로 하나입니다. 구성 요소의wxml
  여러슬롯을 사용해야 하는 경우 구성 요소에서 사용할 수 있습니다. js활성화하는 명령문

• 참고this.selectComponent(): 현재 미니 프로그램에는 기본 슬롯과 여러 개의 슬롯만 있으며 범위 슬롯은 아직 지원되지 않습니다

    这是一段固定的文本内容   

• 미니 프로그램의 사용자 정의 구성 요소에서 다중 슬롯을 사용해야 하는 경우.js파일에 다음 코드(예제)를 추가할 수 있습니다. 구성 요소:

// 父组件的 data 节点 data: { count: 0 } // 父组件的wxml 结构  ~~ 父组件中，count值为：{{count}}

로그인 후 복사

// 子组件的 properties 节点 properties: { count: Number } // 子组件的 wxml 结构 子组件中，count值为：{{count}}

2. 상위-하위 컴포넌트 통신

• 父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
• 在父组件的wxml中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件
• 在子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/* 参数对象 */})，将数据发送到父组件
• 在父组件的js中，通过e.detail获取到子组件传递过来的数据

4. 事件绑定的核心实现代码

• 步骤1： 在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

代码如下（示例）：

// 父组件中定义 syncCount 方法 // 将来，这个方法会被传递给子组件，供子组件进行调用 syncCount() { console.log('syncCount') },

• 步骤 2：在父组件的wxml中，通过自定义事件的形式，将 步骤 1 中定义的函数引用，传递给子组件

代码如下（示例）：

• 步骤 3：在子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/* 参数对象 */})
속성 바인딩 상위 구성요소에 데이터를 하위 구성요소의 지정된 속성으로 설정하는 데 사용됩니다.

// 子组件的wxml结构 子组件中，count值为：{{count}} +1 // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent('sync', {value: this.properties.count}) } }

syncCount(e) { // console.log(e.detail.value) this.setData({ count: e.detail.value }) }

// wxml结构  获取子组件实例 getChild() { // 按钮的tap事件处理函数 // 切记下面参数不能传递标签选择器 'my-test3',不然返回的是 null const child = this.selectComponent('.customA') // 也可以传递 id 选择器 #cA child.setData({ count: child.properties.count + 1 }) // 调用子组件的 setData 方法 child.addCount() // 调用子组件的 addCount 方法 }

// 子组件的wxml结构 <text>子组件中，count值为：{{count}}</text> <button type="primary" bindtap="addCount">+1</button> // 子组件中的 js 代码 methods: { addCount() { this.setData({ count: this.properties.count + 1 }) this.triggerEvent(&#39;sync&#39;, {value: this.properties.count}) } }