vue父子组件相互传值

最新推荐文章于 2025-06-17 10:37:35 发布

原创最新推荐文章于 2025-06-17 10:37:35 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍Vue.js中父组件与子组件如何通过特定的方法进行通信。父组件可通过this.$refs访问子组件的方法，而子组件则能通过this.$parent调用父组件的方法。文章通过实例展示了如何在组件间传递和调用方法。

父组件：this.$refs

子组件：this.$parent

父组件代码：

<template>
  <div>
    <v-father ref="father"></v-father>
    <button @click="sonData()" style="margin-top:20px">父组件按钮</button>
    <h1>父组件</h1>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  data() {
    return {
      title: "父组件传值1111"
    };
  },
  components: {
    "v-father": son
  },
  methods: {
    sonData() {
      this.$refs.father.sonRun();
    },
    fatherRun(){
      alert('父组件方法')
    }
  }
};
</script>
<style>
</style>

子组件代码：

<template>
  <div>
    <h2>子组件----{{title}}</h2>
    <button @click="fatherData()">子组件按钮</button>
  </div>
</template>
<script>
export default {
  data() {},
  methods: {
    sonRun() {
      alert("子组件方法");
    },
    fatherData() {
      this.$parent.fatherRun();
    }
  },
  props:['title']
};
</script>

在父组件中可以取到子组件的sonRun()方法，在子组件中可以取到父组件的fatherRun()方法。