Vue2 组件通信 - 边界传值

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>