Vue2 组件通信 - 边界传值

最新推荐文章于 2025-04-22 18:25:23 发布

原创最新推荐文章于 2025-04-22 18:25:23 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

本文介绍了如何在Vue中利用ref和$parent实现父子组件之间的数据交互，包括父组件通过ref获取子组件实例，子组件通过$parent访问父组件的数据。

Vue中允许父子嵌套组件关系中，父组件可以直接通过ref属性访问子组件实例，子组件内部可以通过$parent关键字直接访问父组件实例，让父子嵌套组件可以无缝的互相设置一些数据

ref：父组件可以获取子组件实例、标签DOM对象
$parent：子组件中可以获取父组件实例

父组件代码:

<template>
  <div>
    <button @click="obtain">获取子组件数据</button>
    <Son ref="son"></Son>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      father: "父组件数据",
    };
  },
  methods: {
    obtain() {
      // 获取子组件数据
      console.log(this.$refs.son.child);
    },
  },
};
</script>

子组件代码:

<template>
  <div>
    <button @click="obtain">获取父组件数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      child: "子组件数据",
    };
  },
  methods: {
    obtain() {
    // 获取父组件数据
      console.log(this.$parent.father);
    },
  },
};
</script>