Vue中父组件直接调用子组件中函数的方法

在Vue父组件，也就是页面调用其引入的子组件，是可以直接调用子组件中函数的方法，需求场景有很多，比如搜索条件查询，搜索查询的模块就在当前页面，而内容区的结果是在子组件，在子组件不想使用监听事件时便可以使用此方法并将参数传进子组件中，需求场景还有很多，开发时的思路是由知识量决定，当然一个问题并不是一种解决思路，这也是因为头脑中存储了很多种对代码的用法，了解的越多，思路越活跃。

页面中引入了组件 并通过ref来绑定：

<template>
  <div>
    <button @click="parentClick">点击</button>
    <Child ref="mychild" />   //使用组件标签
  </div>
</template>
 
<script>
  import Child from './child';   //引入子组件Child
  export default {
    name: "parent",
    components: {
      Child    // 将组件隐射为标签
    },
    methods: {
      parentClick() {
        this.$refs.mychild.childClick("你爸爸给你传过来的");  // 调用子组件的方法childClick
      }
    }
  }
</script>

子组件中的childClick函数会被调用：

<template>
  <div>
    childComponent
  </div>
</template>
 
<script>
  export default {
    name: "child",
    methods: {
      childClick(e) {
        console.log(e)
      }
    }
  }
</script>