什么，你居然还不会Vue组件间传值？

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

大家好，我是林家少爷，是一位专注于前端技术，立志成为前端技术专家的热血青年。

从2023年1月17日开始，我决定开辟一个新的专栏【刷爆LeetCode】，每天至少刷一道LeetCode原题，并且使用Typescript和原生JS来编写代码。

今天是第一天ヾ(◍°∇°◍)ﾉﾞ

今天遇见了一件事情，差点让我把办公桌整个掀掉，幸好理性克制了感性，成年人还是要控制好情绪。

原因是Vue父子组件间的传值问题，原本父子传值有两种方式，但是使用了两种方式都没奏效。

初步判断可能是公司业务开发的框架是基于element ui二次封装的，所以有一些方法出现了重名，导致父子组件传值不生效。

原本打算去问问这个搭建整个开发框架的前端组长，但是到下班点了，又是周五，只见到在我眼前闪过一阵黑旋风（他穿着黑色外套），消失在我的眼前。

下班跑的真够快的，没办法，下周一再研究咯。

趁着这次机会，系统地再总结一下Vue技术栈开发中，最常见的两种父组件操作子组件函数的方式吧：

$on$emit的组合使用

父组件调用子组件的函数，所以父组件中使用 $emit( “函数名”，传递的参数) ； 

子组件中监听此函数使用 $emit(“函数名”，传递的参数)；

子组件中监听此函数使用 $emit(“函数名”，传递的参数)；

子组件中监听此函数使用 $on(“函数名”，res =>{执行函数}); res 即为父组件传递给子组件的参数。

举个栗子：

父组件

<template>
  <div>
  <div @click="click">点击父组件</div>
  <child ref="child"></child>
  </div>
 </template>


 <script>
  import child from './child'
export default {
  methods: {
    click() {
      this.$refs.child.$emit('childMethod', '发送给方法一的数据') // 方法1:触发监听事件
      this.$refs.child.callMethod() // 方法2:直接调用
    },
  },
  components: {
    child,
  },
}
</script>

子组件

<template>
<div>子组件</div>
</template>

<script>
    export default {
        mounted() {
            this.monitoring() // 注册监听事件
        },
        methods: {
            monitoring() { // 监听事件
                this.$on('childMethod', (res) => {
                    console.log('方法1:触发监听事件监听成功')
                    console.log(res)
                })
            },
            callMethod() {
                console.log('方法2:直接调用调用成功')
            },
        }
    }
</script>

上面两种方法，已经覆盖了日常工作中80%以上的场景。

下期再见，还有，我的【老林故事汇】明天开始正式连载，第一阶段预计要开展10期，我会用尽我的所有笔力，分享我大学到现在出来工作（4年大学+4年工作）8年以来的风风雨雨，我不甘心只做一个火鸡程序员，我要做高级火鸡技术专家，加油ヾ(◍°∇°◍)ﾉﾞ