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

      兄弟组件传值

      # 兄弟组件传值

      子组件1中把值传到父组件,父组件获取值传入子组件2

      父组件:

      <子组件1 @方法名x="方法名y"></子组件1>
      
      <子组件2 :值名称x="值x"></子组件2 >
      
      data() {
      	return {
      	 值x: ''
      	}
      },
      methods: {
      	方法名y(值) {
      		this.值x = 值
      	}
      }
      
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15

      子组件1:

      this.$emit('方法名x', 值) // 传出值
      
      1

      子组件2:

      props: {
          值名称x: { // 接收父组件传入值
              type: String,
              default: ''
          }
      }
      
      1
      2
      3
      4
      5
      6
      编辑 (opens new window)
      #Vue
      自定义事件
      非父子组件传值

      ← 自定义事件 非父子组件传值→

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