現(xiàn)在我們來學(xué)習(xí)一下使用組合API時(shí)，怎么處理事件
我們把上節(jié)課沒有的代碼都去掉，現(xiàn)在只剩下一個(gè)列表，我們要做一個(gè)點(diǎn)擊列表項(xiàng)時(shí)，打印一段內(nèi)容的功能

<template>
  <ul>
    <li v-for="item in list" :key="item" >{{ item }}</li>
  </ul>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const list = reactive(['蘇格拉底', '柏拉圖', '亞里士多德'])
    return {
      list,
    }
  },
}
</script>

首先處理事件需要一個(gè)事件的回調(diào)函數(shù)，我們?cè)趕etup中定義一個(gè)回調(diào)函數(shù)，
在setup函數(shù)中，聲明一個(gè)函數(shù)

    const onClick = (item) => {
      console.log(item + '被點(diǎn)擊了')
    }

這個(gè)函數(shù)名字叫onClick，它等于一個(gè)箭頭函數(shù)

和響應(yīng)式數(shù)據(jù)一樣，如果要在template中使用，就需要在setup函數(shù)中把它return

    return {
      list,
      onClick,  // 新增
    }

在template中使用時(shí)就和原來的用法一樣了，完整代碼

<template>
  <ul>
    <li v-for="item in list" :key="item" @click="onClick(item)">{{ item }}</li>
  </ul>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const list = reactive(['蘇格拉底', '柏拉圖', '亞里士多德'])
    const onClick = (item) => {
      console.log(item + '被點(diǎn)擊了')
    }
    return {
      list,
      onClick,
    }
  },
}
</script>

我們?cè)陧撁嫔想S便點(diǎn)擊一項(xiàng)時(shí)，控制臺(tái)就會(huì)輸出相應(yīng)內(nèi)容

蘇格拉底被點(diǎn)擊了

總結(jié)一下：
在使用函數(shù)時(shí)，定義一個(gè)函數(shù)，然后在setup中返回就行了

這節(jié)課內(nèi)容就這么點(diǎn)，主要是為后面咱們的小dome做一個(gè)鋪墊。