Vue父组件向子组件传值及调用子组件函数失败求助

兄弟我太懂这种卡壳到怀疑人生的感觉了！Vue父子组件通信真没你想的那么复杂，大概率是某个细节没踩对——我帮你把最常用的两种场景捋清楚，再给你指几个容易掉的坑，你对照着看看自己的代码哪里出问题了：

这是最常用的传值方式，核心是子组件声明接收，父组件绑定传递：

• 第一步：子组件里必须在props选项里声明要接收的参数，不能直接用
• 第二步：父组件引用子组件时，用v-bind（简写:）把数据绑过去，别直接写死字符串

给你个完整的正确示例：
子组件（Child.vue）：

<template>
  <div>子组件收到的父组件数据：{{ parentData }}</div>
</template>

<script>
export default {
  name: 'Child',
  // 必须在这里声明props，还可以指定类型和默认值，更严谨
  props: {
    parentData: {
      type: [String, Number],
      default: '默认值'
    }
  }
}
</script>

父组件（Parent.vue）：

<template>
  <div>
    <!-- 用:绑定父组件的data，注意短横线命名对应子组件的驼峰 -->
    <Child :parent-data="myData" />
  </div>
</template>

<script>
import Child from './Child.vue' // 别忘了引入子组件
export default {
  name: 'Parent',
  components: { Child }, // 必须注册子组件才能用
  data() {
    return {
      myData: '这是父组件要传给子的内容'
    }
  }
}
</script>

⚠️ 常见坑：

• 传值时没加:，直接写parent-data="myData"，这会把字符串"myData"传过去，而不是父组件的变量myData
• 子组件里直接修改props的值！Vue不允许，要改的话可以把props赋值给子组件的data，或者用计算属性

核心是给子组件加ref属性，通过this.$refs拿到子组件实例后调用方法：
示例如下：
子组件（Child.vue）：

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

<script>
export default {
  name: 'Child',
  methods: {
    childSayHi() {
      console.log('我是子组件的函数，被父组件调用啦！')
      // 这里可以写子组件的逻辑，比如修改子组件内部数据
    }
  }
}
</script>

父组件（Parent.vue）：

<template>
  <div>
    <button @click="callChildMethod">点我调用子组件函数</button>
    <!-- 给子组件加ref，名字随便取，只要后面对应上 -->
    <Child ref="myChild" />
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  name: 'Parent',
  components: { Child },
  methods: {
    callChildMethod() {
      // 通过$refs拿到子组件实例，然后调用它的方法
      this.$refs.myChild.childSayHi()
    }
  }
}
</script>

⚠️ 常见坑：

• 不要在父组件的created钩子调用，这时候子组件还没挂载，$refs拿不到实例，最好在mounted或者用户触发的事件（比如点击）里调用
• ref名字写错了！比如子组件写的ref="myChild"，父组件写成this.$refs.child，肯定找不到

你可以对照着上面的步骤检查自己的代码，大概率是某个细节漏了——要是把你没写完的代码补全，我还能帮你揪出具体的bug～

内容的提问来源于stack exchange，提问作者user2423718