L&Z's blog L&Z's blog
主页
  • HTML
  • CSS
  • JS
  • TS
  • Vue
  • Node
  • Markdown
  • Yaml
  • HTML
  • CSS
  • JS
  • TS
  • Vue
  • Node
  • 小程序
  • 博客
  • 工作
  • VSCode
  • Browser
  • Npm
  • Git
  • GitHub
  • 友链
  • 收藏
  • 足迹
  • 记录
  • 抽奖
  • 错 or 对
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

L&Z

主页
  • HTML
  • CSS
  • JS
  • TS
  • Vue
  • Node
  • Markdown
  • Yaml
  • HTML
  • CSS
  • JS
  • TS
  • Vue
  • Node
  • 小程序
  • 博客
  • 工作
  • VSCode
  • Browser
  • Npm
  • Git
  • GitHub
  • 友链
  • 收藏
  • 足迹
  • 记录
  • 抽奖
  • 错 or 对
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • CSS

  • JS

  • Vue

    • 基础

    • 组件

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

    • 可复用性&组合

    • 工具

    • 规模化

    • Vuex

    • Axios 常用配置
    • Vue中的防抖函数封装和使用
    • 操作本地缓存
  • Node

  • 小程序

  • 博客搭建

  • 工作

  • 笔记
  • Vue
  • 组件
lz
2021-08-04

父组件调用子组件方法并传入值

通过ref引用调用子组件内的方法并传入参数

父组件:

<子组件标签  ref="refName"></子组件标签>

methods: {
  fnX(x) {
    this.$refs.refName.fnY(x) // 调用子组件方法并传入值
  }
}
1
2
3
4
5
6
7

子组件:

methods: {
  fnY(x) {
    this.x = x
  }
}
1
2
3
4
5
编辑 (opens new window)
#Vue
上次更新: 2023/03/08, 02:53:55
非父子组件传值
动态组件与v-once指令

← 非父子组件传值 动态组件与v-once指令→

最近更新
01
nodejs递归读取所有文件
12-15
02
vue3响应式原理
09-20
03
原生js实现jquery中siblings效果
09-20
更多文章>
Theme by Vdoing | Copyright © 2021-2025 L&Z |
  • 跟随系统
  • 浅色模式
  • 深色模式