Vue 组件通信 – 特殊情况：$refs 和 $parent

Vue 中，有着十分方便的工具，使用它们的同时，遵循一些规则，可以很大程度上提高代码的可读性。

但，日常使用过程中，会出现一些情况，让我们不想遵守这些规则，这时，可以“被迫”使用一些 Vue 不推荐的方法。

$refs 和 $parent

对于父子组件之间的通信，props 和 $emit 可以很方便的进行父子组件的数据传递，但是有些情况依然无法满足。

比如，父组件如果想要调用子组件中的方法，将变得非常复杂。这时，

• 可以使用 $refs 来获取子组件中的内容
• 也可以在子组件中，使用 $parent 获取父组件的内容

通过这种方式，子组件中可以调用父组件函数，也可以直接调用父组件的变量，只是这样做可能会使项目的调试和理解变得更加困难，所以，还是慎用 $refs 和 $parent 为好。

同时，因为 $refs 是在组件渲染完成之后生效，并非响应式，所以在模板或者计算属性中使用 $refs 是不可行的。

// 父组件
<template>
  <div id="app">
    <!-- 给组件添加ref属性，此时this.$refs.childComponent指向子组件 -->
    <Child ref="childComponent"></Child>  // childComponnets可以自定义名称
    <button @click="getChildFunc">按钮</button>
  </div>
</template>
 
<script>
  import Child from './components/Child.vue';
  export default{
    data(){
      return{
      }
    },
    components:{
      Child
    },
    methods:{
      getChildFunc(){
        // 可以使用 $refs 来调用子组件中的方法
        this.$refs.childComponent.childFunc();
      }
    }
  }
</script>

---

<!-- 子组件 Child.vue -->
<template>
  <div id="content">
    <span>{{msg}}</span>
    <button @click="getParentFunc">子组件按钮</button>
  </div>
</template>
 
<script>
  export default{
    data(){
      return{
        msg:'Hello'
      }
    },
    methods:{
      childFunc(){
        this.msg = 'World'
      },
      getParentFunc(){
        同样的,在子组件中可以使用$parent调用父组件中的方法
        this.$parent.getChildFunc();
      }
    }
  }
</script>