掌握秘诀：巧用微信小程序调用子组件，玩转小程序开发

前端

2023-05-16 07:36:05

微信小程序中调用子组件的两种方法

在微信小程序开发中，组件是构建界面不可或缺的组成部分。子组件作为父组件的一部分，负责完成特定功能。调用子组件的方法主要有两种：触发自定义事件和直接调用。本文将详细介绍这两种方法，帮助开发者了解其优缺点并选择合适的方法。

触发自定义事件

触发自定义事件是调用子组件最常用、最推荐的方式。子组件在需要被调用时，可以触发一个自定义事件，父组件监听该事件并执行相应的操作。这种方法的优势在于父子组件之间解耦，子组件不需要了解父组件的具体实现，降低了代码的复杂性和维护成本。

触发自定义事件的步骤如下：

子组件中触发事件： 通过 this.$emit() 方法触发自定义事件。
父组件中监听事件： 使用 @ 指令监听子组件的自定义事件，并定义事件处理函数。

代码示例：

子组件：

<template>
  <button @click="triggerEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('my-event', { data: 'hello world' })
    }
  }
}
</script>

父组件：

<template>
  <MyComponent @my-event="handleEvent" />
</template>

<script>
export default {
  methods: {
    handleEvent(event) {
      console.log(event.data) // 输出：hello world
    }
  }
}
</script>

直接调用

直接调用是指在子组件中直接使用父组件的方法。这种方法简单直接，但父子组件之间的耦合度较高，不利于代码维护。

直接调用的步骤如下：

父组件中定义方法： 在父组件中定义要被调用的方法。
子组件中调用方法： 在子组件中使用 this.parentMethod() 直接调用父组件的方法。

代码示例：

父组件：

<template>
  <MyComponent :parentMethod="parentMethod" />
</template>

<script>
export default {
  methods: {
    parentMethod() {
      console.log('parent method called')
    }
  }
}
</script>

子组件：

<template>
  <button @click="callParentMethod">调用父组件方法</button>
</template>

<script>
export default {
  props: ['parentMethod'],
  methods: {
    callParentMethod() {
      this.parentMethod()
    }
  }
}
</script>