当前位置：首页 > news >正文

vue使用slot时子组件的onUpdated执行问题

news 来源：原创 2025/6/17 20:00:34

vue使用slot时子组件的onUpdated执行问题

在使用 Vue 的插槽 (slot) 功能时，可能会遇到一个问题：当父组件的任何状态更新时，子组件的 onUpdated 事件会被触发。这个问题在使用默认插槽时尤为明显。
为了避免这种情况，可以使用作用域插槽。

示例代码

以下是一个示例，展示了如何使用默认插槽和作用域插槽。

父组件 (`slot.vue`)

<template>
    <div class="about">
        <h1>{{ msg }}</h1>
        <SlotChild class="parentClass">
        this is slot content; 
    <!-- 注释下一行就不会触发onupdated -->
        <slot></slot>
        <!-- 作用域插槽 可以访问子组件的状态 -->
        <template #s2="scope">
            hello slot1 
            {{ scope.text }}
        </template>
        </SlotChild>
    </div>
</template>

<script setup>
import SlotChild from './SlotChild.vue'
import { ref, onUpdated } from 'vue'

const msg = ref('this is messages')

onUpdated(() => {
    console.log('updated parent')
})

setTimeout(() => {
    msg.value = 'changed msg'
}, 1000)
</script>

子组件 (`SlotChild.vue`)

<template>
    <div class="about">
        <h1>SlotChild</h1>
        <slot name="default">
            this is default content
        </slot>
        <!-- 具名插槽,在一个组件里有多个插槽出口 -->
        <p>
            <slot name="s1" :text='text1'></slot><br>
            <slot name="s2" :text='text2'></slot><br>
        </p>
    </div>
</template>

<script setup>
import { ref, onUpdated } from 'vue'

const text = ref('this is default text')
const text1 = ref('this is scoped text1')

onUpdated(() => {
    console.log('updated child')
})
</script>