在组合 Api vue 3 nuxt3 中设置发射值

Question

我从组件中获取数据，但我不明白如何获取api组成中的数据。 我不能将它传递给某个变量。 我无法从 function 返回数据。

我是新手作文api，也用nuxt。

也许我可以以某种方式使用它useState()

我只需要获取function addToBasket中的数据

 html <SelectSize @selectedSize="selectedSize"></SelectSize> js <script setup> let selectedSize=(val)=> { return val } let addToBasket=(id)=>{ console.log(selectedSize()) console.log(id) } </script>

Answer 1

你应该使用ref()

const size = ref('');
const size = ref<CustomType>(); // or with types

您可以在 selectedSize 中设置它的值 function

const selectedSize = (val) => {
    size.value = val;
}

然后您可以在脚本设置中的任何位置访问变量的值。 例如在 addToBasket function 中。

const addToBasket = (id) => {
    console.log(size.value);
    console.log(id)
}

检查 Vue 文档中的ref()

Answer 2

不要将selectedSize作为方法，而是将其设为 ref： const selectedSize = ref('') 。 当@selectedSize事件侦听器触发时，将selectedSize ref 的值设置为传递给事件侦听器的$event参数的值。

html
<SelectSize  @selectedSize="($event) => selectedSize = $event"></SelectSize>

js

<script setup>


let selectedSize= ref('')
let addToBasket=(id)=>{
  console.log(selectedSize.value)
  console.log(id)
}
</script>