详解vue3中setup函数的参数-props和context

1. 什么是setup函数

在Vue 3中，组件选项对象中增加了一个setup函数，它是在beforeCreate生命周期钩子之前被调用，通过setup函数可以获取props、context等变量、方法的引用，并且可以进行数据响应式处理、注册组件、插件等操作。

2. props参数

props是在组件中定义的属性，父组件可以通过这些属性向子组件传递数据，子组件通过props属性接收这些数据。在setup函数中，通过props参数获取到组件的props，用法如下：

import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    console.log(props.message) // 输出父组件传递的消息
  }
})

2.1 使用props进行数据响应式处理

在Vue.js中，数据响应式处理是使用defineReactive函数来实现的。在Vue 3中，我们可以直接使用ref和reactive函数来创建响应式的数据，但是父组件传递的props并不会自动变成响应式的，需要我们手动使用ref函数将它变成响应式的。

import { defineComponent, ref } from 'vue'
export default defineComponent({
  props: {
    count: Number
  },
  setup(props) {
    const count = ref(props.count)
    console.log(count.value) // 输出父组件传递的count值
  }
})

这里我们将props.count用ref函数包装，这样就可以将它变成响应式的了。

3. context参数

在组件中，context是一个包含了许多属性和方法的对象，它可以让我们在setup函数中获取到组件实例的各种信息和方法。在Vue 3中，我们可以通过context对象来获取refs、emit函数、attrs、slots等属性和方法。

3.1 使用context方法emit触发事件

在Vue 2中，我们可以使用$emit方法来触发事件。在Vue 3中，由于setup函数是在beforeCreate生命周期钩子之前被调用的，所以在setup函数内部是无法直接通过this.$emit来触发事件的，这时候就需要使用context对象提供的emit方法来触发事件。用法如下：

import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    message: String
  },
  setup(props, context) {
    function handleClick() {
      context.emit('on-click', 'Hello World')
    }
    return {
      handleClick
    }
  }
})

在这个例子中，我们通过context.emit来触发一个名为on-click的事件，并且传递了参数Hello World。在父组件中，我们可以通过@on-click来监听到这个事件，并且获取到传递的参数。用法如下：

<template>
  <MyComponent @on-click="handleClick"></MyComponent>
</template>
<script>
export default {
  methods: {
    handleClick(msg) {
      console.log(msg) // 输出Hello World
    }
  }
}
</script>

3.2 获取refs和attrs

在Vue 2中，我们可以通过this.$refs来获取到组件上的ref引用，通过this.$attrs来获取到未定义在props中的非响应式组件属性。在Vue 3中，我们可以通过context.refs和context.attrs来进行获取，用法如下：

import { defineComponent } from 'vue'
export default defineComponent({
  setup(props, context) {
    const inputRef = context.refs.input
    const size = context.attrs.size
    console.log(inputRef.value) // 输出input组件的值
    console.log(size) // 输出组件的size属性
  }
})

3.3 获取slots

在Vue.js中，我们可以使用slot来分发内容。在Vue 2中，我们可以通过this.$slots来获取到插槽内容，但是在Vue 3中，我们需要通过context.slots来进行获取。用法如下：

import { defineComponent } from 'vue'
export default defineComponent({
  setup(props, context) {
    console.log(context.slots.default()) // 输出插槽内容
  }
})

4. 总结

在Vue 3中，setup函数是一个非常重要的函数，它可以让我们更加方便地进行组件开发和数据处理。通过访问props和context对象，我们可以方便地获取组件传递的数据和组件实例的各种方法和属性，从而更加方便地对组件进行操作。在实际开发中，我们需要灵活使用setup函数，以提高开发效率。