前后端知识库 前后端知识库
首页
    • JavaScript
    • React
    • Vue
  • Python
  • Sanic
  • Linux
  • Ansible
归档
GitHub (opens new window)
首页
    • JavaScript
    • React
    • Vue
  • Python
  • Sanic
  • Linux
  • Ansible
归档
GitHub (opens new window)
  • JavaScript

  • React

  • Vue

    • 基础

    • 组件

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

    • 可复用性&组合

    • 工具

    • 规模化

    • 其他

  • frontend
  • Vue
  • 组件
devin
2023-09-07

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

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

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 xugaoyi (@xugaoyi) on CodePen.

编辑 (opens new window)
上次更新: 2023/09/07, 15:09:00
父组件给子组件传值
Prop 验证 与 非 Prop 的 Attribute

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

Theme by Vdoing | Copyright © 2023-2023 devin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式