이 글에서는 WeChat 애플릿의 슬롯과 부모-자식 구성 요소 통신의 여러 방법을 소개하겠습니다. 도움이 되길 바랍니다!
오늘은 미니 프로그램에서 슬롯과 부모-자식 컴포넌트 간의 통신에 대해 살펴보고, vue와 어떤 차이점이 있는지 살펴보겠습니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]
1.
사용자 정의 구성 요소의 wxml 구조에서 구성 요소 사용자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
하위 구성 요소가 구멍을 파고 상위 구성 요소가 구멍을 채우는 과정입니다. 상위 구성 요소가 하위 구성 요소를 사용할 때 하위 구성 요소 내부의 레이아웃 표시를 결정합니다상위 구성 요소는 구성 요소 태그 중간에 있는 콘텐츠를 통해 구멍을 채웁니다
2 . 단일 슬롯JSON미니 프로그램에서는 기본적으로 각 사용자 정의 구성 요소에 하나의 슬롯 자리 표시자가 허용됩니다. 이 수 제한을 단일 슬롯이라고 합니다.
wxml여러 슬롯을 사용해야 하는 경우 구성 요소 에서 사용할 수 있습니다. js 활성화하는 명령문참고this.selectComponent(): 현재 미니 프로그램에는 기본 슬롯과 여러 개의 슬롯만 있으며 범위 슬롯은 아직 지원되지 않습니다
<!-- 组件模板 --> <view class="wrapper"> <!-- name 为 before 的第一个 slot 插槽 --> <slot name="before"></slot> <view>这是一段固定的文本内容</view> <!-- name 为 after 的第二个 slot 插槽 --> <slot name="after"></slot> </view>
.js 파일에 다음 코드(예제)를 추가할 수 있습니다. 구성 요소: // 父组件的 data 节点
data: {
count: 0
}
// 父组件的wxml 结构
<my-test3 count="{{count}}"></my-test3>
<view>~~</view>
<view>父组件中，count值为：{{count}}</view>.wxml에서 여러 태그를 사용하여 이름이 다른 여러 슬롯을 구분할 수 있습니다. 코드는 다음과 같습니다(예): // 子组件的 properties 节点
properties: {
count: Number
}
// 子组件的 wxml 结构
<text>子组件中，count值为：{{count}}</text>2. 상위-하위 컴포넌트 통신
1. 상위-하위 컴포넌트 통신 방법父组件 的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件父组件 的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', {/* 参数对象 */})，将数据发送到父组件js 中，通过 e.detail 获取到子组件传递过来的数据4. 事件绑定的核心实现代码
js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件代码如下（示例）：
// 父组件中定义 syncCount 方法
// 将来，这个方法会被传递给子组件，供子组件进行调用
syncCount() {
console.log('syncCount')
},wxml 中，通过自定义事件的形式，将 步骤 1 中定义的函数引用，传递给子组件代码如下（示例）：
<!-- 使用 bind: 自定义事件名称(推荐：结构清晰) -->
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>
<!-- 或在 bind 后面直接协商自定义事件名称 -->
<my-test3 count="{{count}}" bindsync="syncCount"></my-test3>子组件的 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})
}
}상위 구성 요소의 js에서 함수를 정의합니다. 이 함수는 a 형식으로 하위 구성 요소에 전달됩니다. custom event🎜🎜 < code>상위 컴포넌트의 wxml에서 1단계에서 정의한 함수 참조를 커스텀 이벤트 형식으로 하위 컴포넌트에 전달합니다🎜🎜하위 구성요소</code ><code>js에서는 this.triggerEvent('custom event name', {/* 매개변수 객체*/})</code를 호출하여 상위 구성요소에 데이터를 보냅니다. > 상위 컴포넌트의 <code>js에서 e.detail🎜🎜🎜🎜🎜4을 통해 하위 컴포넌트가 전달한 데이터를 가져옵니다.4 이벤트 바인딩의 핵심 구현 코드🎜 🎜🎜 🎜🎜1단계: 상위 구성 요소의 js에서 함수를 정의합니다. 이 함수는 맞춤 이벤트 형식으로 하위 구성 요소에 전달됩니다.🎜🎜🎜코드는 다음과 같습니다( 예): 🎜syncCount(e) {
// console.log(e.detail.value)
this.setData({
count: e.detail.value
})
}wxml에서 1단계에서 정의한 함수 참조를 사용자 정의 이벤트 형식으로 하위 구성 요소에 전달합니다.🎜🎜🎜코드는 다음과 같습니다. 다음과 같습니다(예):🎜// 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에서 this.triggerEvent('custom event name', {/* 매개변수를 호출합니다. object*/})< /code>, 상위 구성 요소에 데이터 보내기 🎜🎜🎜코드는 다음과 같습니다(예): 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 子组件的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})
}
}</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><ul><li>步骤 4：在父组件的 <code>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 方法
}更多编程相关知识，请访问：编程入门！！
위 내용은 미니 프로그램의 슬롯과 상위-하위 구성 요소 간의 여러 통신 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
