### 彪哥

爱好前端

- 基础

- 组件

  - 使用组件的细节点
  - 父组件给子组件传值
  - 子组件派发事件和值给父组件
    - 父子组件间传递数据 demo
  - Prop 验证 与 非 Prop 的 Attribute
  - 自定义事件
  - 兄弟组件传值
  - 非父子组件传值
  - 父组件调用子组件方法并传入值
  - 插槽slot
  - 动态组件与 v-once 指令
  - vue父子组件的生命周期顺序

- 过渡&动画

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

- 《Vue》笔记
- 组件

heBody
2020-02-04
目录

# 子组件派发事件和值给父组件

# # 子组件派发事件和值给父组件

API
(opens new window)

子组件通过`$emit`派发事件和值给父组件（值可以有多个）

    this.$emit('fnX', value)

1

父组件通过`v-on`绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值

    <ComponentName @fnX="fnY"></ComponentName>

    methods: {
    	fnY(value) {
    		console.log(value)
    	}
    }

1
2
3
4
5
6
7
8

## # 父子组件间传递数据 demo

See the Pen mdJVqgg by heBody (@heBody) on CodePen.

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
父组件给子组件传值
Prop 验证 与 非 Prop 的 Attribute

← 父组件给子组件传值 Prop 验证 与 非 Prop 的 Attribute→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式