vue3 setup 怎么定义函数 和引入element-plas

在 3 的 `setup` 函数中定义函数非常简单，只需要像普通 JavaScript 中一样定义即可。比如：

<template>
  <div>
    <button @click="handleClick">{{ message }}</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Button } from 'element-plus'

export default {
  name: 'MyComponent',
  components: {
    ElButton: Button
  },
  setup() {
    const message = ref('Hello, world!')

    function handleClick() {
      message.value = 'Button clicked!'
    }

    return {
      message,
      handleClick
    }
  }
}
</script>

在上面的例子中，我们定义了一个 `handleClick` 函数，它会在按钮被点击时更新 `message` 的值。同时，我们还引入了 `element-plus` 中的 `Button` 组件。

需要注意的是，`element-plus` 在 Vue 3 中的使用方式与 Vue 2 中略有不同。我们需要在组件中引入 `Button` 组件，并将其注册为局部组件，然后就可以在模板中直接使用了。

<template>
  <div>
    <el-button @click="handleClick">{{ message }}</el-button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Button } from 'element-plus'

export default {
  name: 'MyComponent',
  components: {
    'el-button': Button
  },
  setup() {
    const message = ref('Hello, world!')

    function handleClick() {
      message.value = 'Button clicked!'
    }

    return {
      message,
      handleClick
    }
  }
}
</script>

在上面的例子中，我们将 `Button` 组件注册为了局部组件 `el-button`。这样就可以在模板中使用 `el-button` 标签来渲染按钮了。