現(xiàn)在我們來(lái)學(xué)習(xí)一下使用組合API時(shí)给梅，怎么處理事件
我們把上節(jié)課沒(méi)有的代碼都去掉柒昏，現(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í)就和原來(lái)的用法一樣了钾腺，完整代碼
<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è)陧?yè)面上隨便點(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è)鋪墊己英。
