[vue3新特性] 2.组合api——3.处理事件

现在我们来学习一下使用组合API时，怎么处理事件
我们把上节课没有的代码都去掉，现在只剩下一个列表，我们要做一个点击列表项时，打印一段内容的功能

<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>

首先处理事件需要一个事件的回调函数，我们在setup中定义一个回调函数，
在setup函数中，声明一个函数

    const onClick = (item) => {
      console.log(item + '被点击了')
    }

这个函数名字叫onClick，它等于一个箭头函数

和响应式数据一样，如果要在template中使用，就需要在setup函数中把它return

    return {
      list,
      onClick,  // 新增
    }

在template中使用时就和原来的用法一样了，完整代码

<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 + '被点击了')
    }
    return {
      list,
      onClick,
    }
  },
}
</script>

我们在页面上随便点击一项时，控制台就会输出相应内容

苏格拉底被点击了

总结一下：
在使用函数时，定义一个函数，然后在setup中返回就行了

这节课内容就这么点，主要是为后面咱们的小dome做一个铺垫。