Vue.js中如何在子组件运行时读取并保存插槽内表单值？

要实现插槽内输入值的保存功能，不建议直接操作DOM（不符合Vue响应式理念），推荐采用数据驱动的组件通信方案，以下是两种可行方式：

方案一：作用域插槽注册数据（推荐） #

通过作用域插槽让父组件将输入值的响应式引用注册到子组件，子组件统一管理并获取这些值。

修改SlotComponent.vue： #

<template>
  <div>
    <!-- 通过作用域插槽暴露注册函数 -->
    <slot name="content" :registerFilter="registerFilter" />
    <button @click="saveFilters">保存过滤器</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 存储所有注册的过滤器值引用
const filterRefs = ref<Ref<string | number | boolean>[]>([]);

// 注册过滤器值的响应式引用
const registerFilter = (ref: Ref<any>) => {
  filterRefs.value.push(ref);
};

// 保存过滤器逻辑
const saveFilters = () => {
  // 提取所有注册的输入值
  const filterValues = filterRefs.value.map(item => item.value);
  // 这里替换为你的保存逻辑（比如存本地、发请求）
  console.log('保存的过滤器值:', filterValues);
};
</script>

修改PageView.vue： #

<template>
  <div>
    <SlotComponent>
      <!-- 接收作用域插槽传递的注册函数，注册当前输入值的ref -->
      <template #content="{ registerFilter }">
        <input v-model="inputValue" type="text" />
        <!-- 调用注册函数，传递响应式引用 -->
        {{ registerFilter(inputValue) }}
      </template>
    </SlotComponent>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SlotComponent from './SlotComponent.vue';

const inputValue = ref("");
</script>

优势：

• 遵循Vue响应式和单向数据流原则，耦合度低
• 支持插槽内放置任意类型的输入组件（如下拉框、日期选择器），只需传递对应值的ref即可
• 可扩展支持多个输入组件，多次调用registerFilter即可收集所有值

方案二：直接访问插槽DOM（不推荐） #

如果特殊场景下需要操作DOM，可以通过ref获取插槽容器，再查询内部元素获取值。

修改SlotComponent.vue： #

<template>
  <div ref="slotContainer">
    <slot name="content" />
    <button @click="saveFilters">保存过滤器</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const slotContainer = ref<HTMLDivElement | null>(null);

const saveFilters = () => {
  if (!slotContainer.value) return;
  // 查询插槽内的input元素（依赖DOM结构，扩展性差）
  const input = slotContainer.value.querySelector('input') as HTMLInputElement;
  if (input) {
    const value = input.value;
    // 处理保存逻辑
    console.log('输入框值:', value);
  }
};
</script>

缺点：

• 依赖插槽内的DOM结构，一旦输入组件类型或位置变化，代码需同步修改
• 无法直接获取自定义输入组件的绑定值（如封装后的el-input）
• 违背Vue数据驱动的设计思想，维护性差

内容的提问来源于stack exchange，提问作者Deniz