Vue.js 组件如何侦听插槽内容变化？

2024-03-20 09:41:24

让 Vue.js 组件侦听插槽内容变化的技巧

引言

在 Vue.js 中，组件可以使用插槽来引入其他组件或内容。然而，默认情况下，组件无法自动检测插槽内容的变化。本文将探讨如何在 Vue.js 中实现对插槽内容变化的侦听，帮助开发人员创建更动态和响应性的组件。

方法一：`watch` API

适用场景： 当需要响应任何插槽内容的变化时。

watch API 允许组件监控响应式数据属性的变化。可以通过将插槽名称作为参数传递给 watch 选项来使用它来侦听插槽内容的变化。

watch: {
  'slot-name': {
    handler(newVal, oldVal) {
      // 插槽内容已更改
    },
    deep: true // 启用深度比较，以检测嵌套对象的变化
  }
}

方法二：`v-if` 和 `v-for` 指令

适用场景： 当需要在插槽包含特定内容时执行动作时。

v-if 和 v-for 指令可用于创建只在插槽包含特定内容时才执行动作的组件。例如：

<template>
  <div v-if="slotContent">
    {{ slotContent }}
  </div>
</template>

<script>
export default {
  computed: {
    slotContent() {
      return this.$slots.default && this.$slots.default[0].text
    }
  }
}
</script>

方法三：JavaScript 事件

适用场景： 当需要手动触发组件内的事件时。

JavaScript 事件可用于手动触发组件内的事件，当插槽内容发生变化时。可以通过使用 MutationObserver API 来侦听插槽元素的 DOM 变化来实现。

export default {
  mounted() {
    const observer = new MutationObserver(mutations => {
      // 插槽内容已更改
    })

    observer.observe(this.$el.querySelector('.slot-element'), {
      childList: true
    })
  }
}