Vue3的组合式API中如何使用setup()函数?

setup()函数又是什么呢？

首先，让我们来了解一下setup()函数。setup()函数是一个特殊的函数，它在Vue组件中扮演着非常重要的角色。它的主要任务是将组件的数据、方法和生命周期函数组织成一个函数，以便在组件实例化时能够轻松地访问它们。

听起来有点复杂？没关系，让我们来看一个简单的例子。假设我们有一个组件，它有一个名为message的数据属性和一个名为reverseMessage的方法，我们希望在组件中使用它们。那么，我们可以这样写setup()函数：

export default {  
  setup() {  
    const message = 'Hello, world!';  
      
    function reverseMessage() {  
      return message.split('').reverse().join('')  
    }  
      
    return {  
      message,  
      reverseMessage  
    }  
  }  
}

在上面的代码中，我们定义了一个setup()函数，它返回一个包含message和reverseMessage的对象。在组件中，我们可以像这样使用它们：

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="reverseMessage">Reverse Message</button>  
  </div>  
</template>  
  
<script>  
import { defineComponent, ref } from 'vue'  
import template from './MyComponent.vue'  
  
export default defineComponent({  
  setup() {  
    const message = ref('Hello, world!')  
      
    function reverseMessage() {  
      return message.value.split('').reverse().join('')  
    }  
      
    return {  
      message,  
      reverseMessage  
    }  
  }  
  render: template  
})  
</script>

在这个例子中，我们使用了Vue的ref函数来创建了一个响应式数据message。然后，我们在setup()函数中定义了一个reverseMessage方法，并返回了一个包含message和reverseMessage的对象。最后，我们在组件的模板中使用了message和reverseMessage。

看到这里，你可能会有一个问题：setup()函数中返回的对象中的那些函数和数据属性是如何在组件中使用的呢？其实，当你在setup()函数中返回一个对象时，Vue会将这些函数和数据属性绑定到组件实例的数据属性中，以便在模板中使用它们。所以，你可以像上面那样在模板中使用message和reverseMessage。

当然，setup()函数还有更多的用法。它还可以使用参数来接收props、emit事件等等。如果你想了解更多关于setup()函数的使用方法，可以查看Vue的官方文档。

如果你想在setup()函数中使用emit事件，可以像这样写：

export default {  
  setup(props, { emit }) {  
    function buttonClicked() {  
      emit('button-clicked', props.message)  
    }  
  
    return {  
      buttonClicked  
    }  
  }  
}

在上面的代码中，我们可以在setup()函数中访问props和emit函数。props是一个对象，它包含了组件接收的属性值。emit是一个对象，它允许我们在组件中触发事件。在这个例子中，我们定义了一个名为buttonClicked的函数，当这个函数被调用时，它会触发一个名为’button-clicked’的事件，并将props.message作为参数传递给事件处理函数。最后，我们返回了一个包含buttonClicked的对象。

在组件的模板中，我们可以像这样使用buttonClicked函数：

<template>  
  <div>  
    <button @click="buttonClicked">Click Me!</button>  
  </div>  
</template>  
  
<script>  
import { defineComponent, ref } from 'vue'  
import template from './MyComponent.vue'  
  
export default defineComponent({  
  setup() {  
    const message = ref('Hello, world!')  
      
    function buttonClicked() {  
      console.log('Button clicked!')  
    }  
      
    return {  
      message,  
      buttonClicked  
    }  
  }  
  render: template  
})  
</script>

在这个例子中，我们在模板中使用了一个按钮来触发buttonClicked函数。当按钮被点击时，buttonClicked函数会在控制台中输出一条消息。当然，这个例子只是一个简单的示例，你可以根据自己的需要使用emit事件。