-
props
参数:props
对象包含了组件接收的属性。您可以在setup()
函数中通过解构或直接访问props
对象来使用这些属性。这个参数在Vue 2中是通过this.$props
来访问的。 -
context
参数:context
对象提供了一些有用的属性和方法,用于在setup()
函数中访问组件实例、父组件属性、全局属性等。一些常用的属性和方法包括:attrs
:一个包含了非响应式属性的对象。slots
:用于访问插槽内容的函数。emit
:用于触发自定义事件的函数。root
:根组件实例的引用。parent
:父组件实例的引用。
下面是一个示例,展示了setup()
函数中使用props
和context
参数的方式:
import { ref } from 'vue';
export default {
props: {
message: String
},
setup(props, context) {
const count = ref(0);
// 使用props
console.log(props.message);
// 使用context
console.log(context.attrs);
console.log(context.slots);
console.log(context.emit);
return {
count
};
}
};
在上面的示例中,我们使用了props
和context
参数来获取组件的属性、非响应式属性、插槽和触发事件的方法。最后,我们通过return
语句返回一个响应式对象count
,使其在组件中可用。
需要注意的是,setup()
函数在组件初始化期间只会执行一次,并且在data
、computed
等选项之前执行。
此代码有该AI 助手为您带来的,v信小程序:欢迎评论留言交流学习