hincky的主页 hincky的主页
  • 学习笔记

    • Vue笔记
    • Vuepress
    • nginx
  • 语言类

    • java
    • go
    • python
    • 设计模式
  • 框架类

    • Spring
    • Spring Security
    • Mybatis
  • 容器技术

    • docker
    • k8s
    • helm
    • prometheus
    • grafana
    • jenkins
  • 命令集合

    • linux命令
    • docker命令
    • git命令
    • vim命令
    • k8s命令
  • 数据库

    • sql
    • mysql
  • 协议

    • 网络模型
    • http/1.1
    • WebSocket
    • http/2
    • TLS/SSL
    • tcp
    • IP
    • tcpdump抓包命令
    • wireshark抓包工具
  • 通用

    • Git
  • 技术分享

    • git push/pull总是超时怎么办
    • idea debug技巧
    • postman使用
    • 问题总结
    • idea使用技巧
  • Oauth2

    • Oauth2原理
  • 项目列表

    • redis项目
    • 微服务项目
  • 分类
  • 标签
  • 归档
  • 随笔
GitHub (opens new window)

Hincky

当有趣的人,做想做的事
  • 学习笔记

    • Vue笔记
    • Vuepress
    • nginx
  • 语言类

    • java
    • go
    • python
    • 设计模式
  • 框架类

    • Spring
    • Spring Security
    • Mybatis
  • 容器技术

    • docker
    • k8s
    • helm
    • prometheus
    • grafana
    • jenkins
  • 命令集合

    • linux命令
    • docker命令
    • git命令
    • vim命令
    • k8s命令
  • 数据库

    • sql
    • mysql
  • 协议

    • 网络模型
    • http/1.1
    • WebSocket
    • http/2
    • TLS/SSL
    • tcp
    • IP
    • tcpdump抓包命令
    • wireshark抓包工具
  • 通用

    • Git
  • 技术分享

    • git push/pull总是超时怎么办
    • idea debug技巧
    • postman使用
    • 问题总结
    • idea使用技巧
  • Oauth2

    • Oauth2原理
  • 项目列表

    • redis项目
    • 微服务项目
  • 分类
  • 标签
  • 归档
  • 随笔
GitHub (opens new window)
  • Vue笔记

    • 基础

    • 组件

      • 使用组件的细节点
        • 解析 DOM 模板时的注意事项
        • 子组件内的data要使用函数返回
        • 通过 ref 引用操作DOM
      • 父组件给子组件传值
        • 单向数据流
        • 父子组件间传递数据 demo
      • 子组件派发事件和值给父组件
        • 父子组件间传递数据 demo
      • Prop 验证 与 非 Prop 的 Attribute
        • Prop 验证
        • 非 Prop 的 Attribute
          • 用处
      • 自定义事件
        • 兄弟组件传值
        • 非父子组件传值
        • 父组件调用子组件方法并传入值
        • 插槽slot
          • 插槽
            • 默认值
          • 具名插槽
          • 作用域插槽
            • 作用:
          • 具名插槽的缩写
          • Demo
        • 动态组件与 v-once 指令
          • 动态组件
            • 动态组件 demo
          • v-once 指令
            • 通过 v-once 创建低开销的静态组件
        • vue父子组件的生命周期顺序
        • 过渡&动画

        • 可复用性&组合

        • 工具

        • 规模化

        • Vuex

        • 其他

      • vuepress

      • nginx

      • 前端
      • Vue笔记
      • 组件
      xugaoyi
      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
      父组件给子组件传值
      Prop 验证 与 非 Prop 的 Attribute

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

      最近更新
      01
      人生前期重要的能力
      05-17
      02
      防火墙命令
      04-11
      03
      docker-compose部署mysql主从集群
      03-22
      更多文章>
      Theme by Vdoing | Copyright © 2022-2023 Hincky | MIT License | 粤ICP备2022120427号
      • 跟随系统
      • 浅色模式
      • 深色模式
      • 阅读模式