Vue项目中如何在父组件中直接调用子组件上的方法

1、页面中有一个对话框，是作为父组件，父组件有 “确定” 和 “取消” 两个按钮
2、对话框中的表单是通过子组件来展示的，点击父组件的按钮，需要调用子组件中的方法。

 通过 $refs 来调用子组件方法

父组件
<template>
  <div>
    <button @click="parentClick">我是父组件的按钮</button>
    <child ref="is_child"></child> //在子组件上绑定ref属性
  </div>
</template>

<script>
import Child from "./child.vue";
export default {
  components: {
    Child
  },
  methods: {
    parentClick() {
      console.log(this.$refs.is_child); //返回的是一个vue实例对象，因此可以直接调用方法
      this.$refs.is_child.sing(); //父组件中直接调用 $refs
    }
  }
};
</script>

```javascript
子组件
<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      name: "tom"
    };
  },
  methods: {
    sing() {
      console.log("我是子组件的方法");
    }
  }
};
</script>