AnswerContainer 迁移速查 ​

这页只回答一件事：旧页面从 @qxs-bns/components-v2 的 AnswerContainer 切到 qxs-answer-container 时，最少要改什么。

如果你想先看完整背景，回到 Components 迁移指南。
如果你已经知道要迁这个容器，直接按这页做就够了。

先替换入口 ​

旧写法：

import { AnswerContainer } from '@qxs-bns/components-v2'

新写法：

import '@qxs-bns/components/answer-container'

<qxs-answer-container></qxs-answer-container>

一眼看懂要改哪些点 ​

Vue 页面最小替换 ​

<script setup lang="ts">
import { ref } from 'vue'
import '@qxs-bns/components/answer-container'

const answerRef = ref<any>(null)
</script>

<template>
  <qxs-answer-container
    ref="answerRef"
    :list.prop="list"
    :disabled.prop="disabled"
    :is-show-correct.prop="isShowCorrect"
    :theme-name="themeName"
    :before-change.prop="beforeChange"
    @on-change="handleChange"
  />
</template>

这几个入参先不要动 ​

第一步迁移时，优先继续保留这些合同：

• list
• disabled
• isShowCorrect
• isShowBg
• themeName
• beforeChange

如果旧页面就是围绕这几项跑的，先不要急着改数据结构。

复杂值统一走 .prop ​

list 和 beforeChange 都是复杂值。
在 Vue 里如果继续按普通 attribute 传，会被当成字符串或丢失原始语义。

推荐直接记这一条：

• 对象、数组、函数、布尔值，优先写成 .prop

例如：

<qxs-answer-container
  :list.prop="list"
  :disabled.prop="disabled"
  :is-show-correct.prop="isShowCorrect"
  :before-change.prop="beforeChange"
/>

方法调用怎么迁 ​

这两个方法仍然保留：

• onSubmit()
• reset()

const result = await answerRef.value?.onSubmit()
answerRef.value?.reset()

onSubmit() 返回的是当前容器内每题最新的运行时结果数组。
reset() 只重置容器内部状态，不会直接改宿主原始数组引用。

事件怎么迁 ​

现在统一按 CustomEvent 处理：

function handleChange(event: CustomEvent) {
  console.log(event.detail)
}

如果旧页面以前直接拿 Vue 回调参数，需要改成从 event.detail 取值。

主题怎么保留 ​

当前先保留两套主题名：

• default
• case-practice

也就是旧页面如果原来已经有：

:theme-name="themeName"

这层通常可以先不动。

样式上先接受哪些差异 ​

第一步迁移先保住运行时合同，不保证这几件事完全和旧页一样：

• 不保证旧 Vue 2 slot 结构还能原样使用
• 不保证旧 DOM 层级和类名还能继续深度覆盖
• 不保证页面逐像素一致

更稳的做法是：

1. 先替换入口和传参方式
2. 先确认 onSubmit()、reset()、themeName 都正常
3. 再补主题细节和局部样式

迁移完成前的检查清单 ​

• 页面已经不再引入 @qxs-bns/components-v2 的 AnswerContainer
• 标签已经替换成 <qxs-answer-container>
• list 改成了 .prop
• beforeChange 改成了 .prop
• 布尔值改成了 .prop
• 事件处理代码改成读取 event.detail
• ref.onSubmit() 和 ref.reset() 跑通
• default / case-practice 至少验过一套主题

下一步 ​

• 想看完整 API：去 AnswerContainer
• 想看完整迁移背景：去 Components 迁移指南
• 想继续从容器迁到单题组件：去 题目组件