在Nuxt3的Composition API中获取子组件emit值的问题

在Nuxt3的Composition API中，你可以用useState()（适合跨服务端/客户端场景）或者ref()（仅客户端状态）来存储选中的尺寸值，这样就能在addToBasket函数中获取到它。以下是具体实现：

方法一：使用useState()（推荐，Nuxt3专属） #

useState()会创建一个跨服务端和客户端共享的响应式状态，适合需要在页面刷新或路由跳转后保留状态的场景：

<SelectSize @selectedSize="handleSizeSelect"></SelectSize>

<script setup>
// 创建响应式状态存储选中的尺寸，初始值设为null或空字符串
const selectedSize = useState('selectedSize', () => null)

// 处理尺寸选择事件，把选中的值赋值给状态变量
const handleSizeSelect = (val) => {
  selectedSize.value = val
}

const addToBasket = (id) => {
  console.log('选中的尺寸:', selectedSize.value)
  console.log('商品ID:', id)
  // 这里可以继续编写加入购物车的逻辑
}
</script>

方法二：使用ref()（仅客户端状态） #

如果不需要服务端渲染时的状态同步，仅在客户端使用的话，可以用Vue的ref()：

<SelectSize @selectedSize="handleSizeSelect"></SelectSize>

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

// 创建客户端响应式变量
const selectedSize = ref(null)

const handleSizeSelect = (val) => {
  selectedSize.value = val
}

const addToBasket = (id) => {
  console.log('选中的尺寸:', selectedSize.value)
  console.log('商品ID:', id)
}
</script>

关键说明 #

• 你之前的写法是把selectedSize作为事件处理函数并返回值，但这种方式不会存储状态，每次调用selectedSize()（无参数）都会返回undefined。
• 不管用useState()还是ref()，都需要通过.value来访问或修改响应式变量的值（在<script setup>中，模板里可以直接用变量名，不用.value）。

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