vue知识点三：父组件调用子组件函数

child.vue

<!--
 * @Description: 子组件
 * @Author: HMM
 * @Date: 2021-01-27 09:12:37
-->
<template>
  <div>childComponent：
  </div>
</template>

<script>
export default {
  name: 'child',
  methods: {
    childClick(e) {
        alert(e);
    },
    getChildData(){
        return '子组件数据: child';
    }
  }
};
</script>

parent.vue:

<!--
 * @Description: 父组件
 * @Author: HMM
 * @Date: 2021-01-27 09:13:01
 * @FilePath: \hsaf-web-ris\src\views\basic\test\parent.vue
-->
<template>
  <div>
    parentComponent:
    <el-button @click="parentClick">点击</el-button>
    <el-button @click="parentGetData">获取子组件数据</el-button>
    <br>
    <br>
    <br>
    <!-- 使用组件标签 -->
    <Child ref="mychild" />
  </div>
</template>

<script>
// 引入子组件Child
import Child from '_v/basic/test/child.vue';

export default {
  name: 'parent',
  components: {
    // 将组件隐射为标签
    Child
  },
  methods: {
    parentClick() {
     // 调用子组件的方法childClick
      this.$refs.mychild.childClick('我是子组件里面的方法哦');
    },
    parentGetData(){
        // 调用子组件的方法childClick
      var data = this.$refs.mychild.getChildData();
      alert('[parentGetData]', data);
    }
  }
};
</script>