HuKai's Blog HuKai's Blog
首页
  • Java核心技术

    • Java基础
    • Java并发编程
    • JVM
    • Java新特性
  • Spring生态

    • Spring5
    • SpringMVC
    • SpringBoot
  • 开源框架

    • MyBatis
  • 计算机网络
  • 操作系统
  • 数据结构与算法
  • 设计模式
  • SQL数据库

    • MySQL
    • Oracle
  • NoSQL数据库

    • Redis
    • MongoDB
  • 页面样式

    • HTML
    • CSS
  • JavaScript

    • JavaScript基础
    • ECMAScript6教程
    • TypeScript
  • 前端框架

    • Vue
    • Webpack
  • NIO
  • Netty
  • RabbitMQ
  • 技术文档

    • GitHub技巧
    • 博客搭建
    • 技术笔记
  • 优质文章

    • 小技巧
    • 解决方案
GitHub (opens new window)

HuKai

梦想成为全栈的保安
首页
  • Java核心技术

    • Java基础
    • Java并发编程
    • JVM
    • Java新特性
  • Spring生态

    • Spring5
    • SpringMVC
    • SpringBoot
  • 开源框架

    • MyBatis
  • 计算机网络
  • 操作系统
  • 数据结构与算法
  • 设计模式
  • SQL数据库

    • MySQL
    • Oracle
  • NoSQL数据库

    • Redis
    • MongoDB
  • 页面样式

    • HTML
    • CSS
  • JavaScript

    • JavaScript基础
    • ECMAScript6教程
    • TypeScript
  • 前端框架

    • Vue
    • Webpack
  • NIO
  • Netty
  • RabbitMQ
  • 技术文档

    • GitHub技巧
    • 博客搭建
    • 技术笔记
  • 优质文章

    • 小技巧
    • 解决方案
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript基础

  • ECMAScript

  • TypeScript

  • Vue

    • Vue基础

    • Vue组件化编程

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

    • Vue插件

  • Webpack

  • 前端
  • Vue
  • Vue组件化编程
HuKai
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 xugaoyi (@xugaoyi) on CodePen.

编辑 (opens new window)
#Vue
上次更新: 2022/03/20, 11:17:00
父组件给子组件传值
Prop 验证 与 非 Prop 的 Attribute

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

最近更新
01
MyBatisPlus
03-20
02
MyBatis源码剖析-延迟加载
03-20
03
MyBatis源码剖析-二级缓存
03-20
更多文章>
Theme by Vdoing | Copyright © 2021-2022 HuKai | 赣ICP备17016768号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式