Skip to content

Commit

Permalink
feat(vue): add watcher for slot content changed
Browse files Browse the repository at this point in the history
  • Loading branch information
Ellipse120 committed Apr 13, 2024
1 parent 8e3d40f commit 92f51b4
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions note.md
Original file line number Diff line number Diff line change
Expand Up @@ -4566,3 +4566,39 @@ setTimeout(() => {
```
---
## 163. Watch slot content changes using [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
```vue
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const slotElement = ref(null)
const observer = ref(null)

const update = () => {
console.log('UPDATE')
}

onMounted(() => {
observer.value = new MutationObserver(update)
observer.value.observe(slotElement.value, { childList: true, subtree: true })
})

onBeforeUnmount(() => {
if (observer.value) {
observer.value.disconnect()
}
})
</script>

<template>
<div ref="slotElement">
<slot />
</div>
</template>
```
---
## 164.

0 comments on commit 92f51b4

Please sign in to comment.