微信小程序父子组件通讯与插槽

在小程序的开发中，我们会遇到父子组件通讯的问题。父子组件通讯是指父组件与子组件之间的数据交换和事件传递。实现父子组件通讯的方式有很多种，本文将介绍两种最常用的方式：props和$emit。

Props

Props是父组件向子组件传递数据的属性。父组件可以通过props将数据传递给子组件，子组件可以通过props接收父组件传递的数据。在子组件中，可以使用this.props.属性名来访问父组件传递的数据。

例如，父组件App.vue代码如下：

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :name="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三'
    }
  }
}
</script>

子组件ChildComponent.vue代码如下：

<template>
  <div>
    <h1>子组件</h1>
    <p>姓名：{{ name }}</p>
  </div>
</template>

<script>
export default {
  props: ['name']
}
</script>

在子组件中，可以使用this.props.name来访问父组件传递的数据。

$emit

emit是子组件向父组件触发事件的方法。子组件可以通过emit触发事件，父组件可以通过监听子组件触发的事件来响应。在子组件中，可以使用this.$emit('事件名', 数据)来触发事件。在父组件中，可以使用<子组件名> @事件名="方法名"来监听子组件触发的事件。

例如，子组件ChildComponent.vue代码如下：

<template>
  <div>
    <h1>子组件</h1>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', '子组件触发了click事件')
    }
  }
}
</script>

父组件App.vue代码如下：

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent @click="handleClick" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(data) {
      console.log(data) // 子组件触发了click事件
    }
  }
}
</script>

在父组件中，可以使用<子组件名> @事件名="方法名"来监听子组件触发的事件。

除了props和$emit之外，微信小程序还提供了插槽来实现父子组件之间的通讯。插槽允许父组件在子组件中定义一个占位符，然后父组件可以通过向插槽中填充内容来实现父子组件之间的通讯。

例如，父组件App.vue代码如下：

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <template v-slot:default>
        子组件的内容
      </template>
    </ChildComponent>
  </div>
</template>

<script>
export default {

}
</script>

子组件ChildComponent.vue代码如下：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {

}
</script>

在父组件中，可以使用