🗒️理解 Vue 中 props 和 自定义事件传值
type
status
date
slug
summary
tags
category
icon
password
在Vue.js框架中，组件化是其核心概念之一。组件可以被看作是独立的、可复用的代码块，它们可以包含自己的模板、逻辑和样式。组件之间可以通过
props和自定义事件进行通信。Props 传值
props是父组件向子组件传递数据的一种方式。父组件通过在子组件的标签上设置属性来传递数据，子组件通过props选项接收这些数据。这种数据传递是单向的，意味着子组件不能直接修改通过props接收到的数据，但可以基于这些数据进行操作。自定义事件
当子组件需要向父组件传递数据时，不能直接修改
props，而是需要使用自定义事件。子组件通过$emit方法触发一个事件，并可以传递数据给父组件。父组件可以通过v-on或者@符号来监听这个事件，并在事件触发时接收数据。示例
假设我们有一个父组件
ParentComponent和一个子组件ChildComponent。我们想要从ChildComponent向ParentComponent传递一个数据。- 父组件（ParentComponent.vue）:
- 子组件（ChildComponent.vue）:
在这个例子中：
- 父组件通过
:initial-data属性将parentData传递给子组件。
- 子组件通过
props接收initialData。
- 子组件有一个按钮，当点击时，会触发
emitData方法。
emitData方法使用$emit触发一个名为child-event的事件，并传递数据'这是来自子组件的数据'。
- 父组件通过
@child-event="handleChildEvent"监听这个事件，并在事件触发时调用handleChildEvent方法来接收数据。
这样，我们就实现了从子组件到父组件的数据传递。