DEV Community
·
Vue - setup()中的Props和Context
内容提要
在Composition API中，setup()函数接收两个参数：props和context。props是只读的反应式数据，context包含attrs、slots和emit，可以通过context.emit()发出自定义事件。
关键要点
-
setup()函数接收两个参数：props和context。
-
props是只读的反应式数据，不能直接修改。
-
context包含attrs、slots和emit，提供额外的功能。
-
attrs用于访问未声明为props的属性，如class或id。
-
slots用于访问传递给组件的插槽内容。
-
emit函数用于发出自定义事件。
-
可以通过context.emit()发出事件，示例中展示了如何使用emit。
-
可以在setup中解构第二个参数以便更方便地使用attrs和slots。
延伸解读
理解Props的只读特性
在Vue的Composition API中，props是只读的反应式数据。这意味着在setup()中不能直接修改props的值，开发者需要通过其他方式来处理数据变化。这一特性确保了组件的状态管理更加清晰，避免了意外的状态改变。
context的多功能性
context对象在setup()中提供了attrs、slots和emit等功能。attrs允许访问未声明为props的属性，slots则用于处理组件的插槽内容，而emit则用于发出自定义事件。这些功能的结合使得组件的灵活性和可复用性大大增强。
使用context.emit发出事件
通过context.emit()，开发者可以在组件内部发出自定义事件，方便与父组件进行交互。这种方式使得组件之间的通信更加清晰，尤其是在复杂的组件结构中，能够有效地管理事件流和状态变化。
延伸问答
setup()函数的参数是什么？
setup()函数接收两个参数：props和context。
props在setup()中有什么特点？
props是只读的反应式数据，不能直接修改。
context对象包含哪些内容？
context对象包含attrs、slots和emit，提供额外的功能。
如何使用context.emit()发出自定义事件？
可以通过context.emit()发出自定义事件，例如在setup中调用emit函数。
attrs和slots在setup()中如何使用？
可以通过context访问attrs和slots，attrs用于访问未声明为props的属性，slots用于访问传递的插槽内容。
在setup()中如何解构context参数？
可以通过解构第二个参数来方便地使用attrs和slots，例如setup(props, { emit, attrs, slots })。
