Vue组件通信-在父组件中触发子组件中的函数 在子组件中将函数执行结果返回给父组件

在父组件中触发子组件中的函数，子组件将函数执行的结果返回给父组件

ref

参考官网：https://cn.vuejs.org/v2/api/#ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向子组件实例。

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

父组件Parent.vue

<template>
    <div class="template_container">
        <input type="number" v-model="inputNumber">
        <button @click="add">累加</button>
        <br/>得到子组件的计算结果拉：{{ sum }}
        <child ref="child" :num="inputNumber"></child>
    </div>
</template>

<script>
import Child from './Child.vue'

export default {
  data () {
    return {
      inputNumber: '',
      sum: ''
    }
  },
  components: {
    Child
  },
  methods: {
    add() {
      // 通过this.$refs.child可以获取到Child组件的vm实例的引用
      // 自然就可以调用子组件中的方法getSum()
      // 并传递了两个参数，一个是用于累加的参数，一个是回调函数(用于将子组件的计算结果传递给父组件)
      this.$refs.child.getSum(this.inputNumber, sum => {
        this.sum = sum
      })
    }
  }
}
</script>

子组件Child.vue

<template>
    <div class="template_container">
        我是子组件(用来做累加的)
        父组件输入了:{{ num }}
    </div>
</template>

<script>
export default {
  data () {
    return {
      sum: 0
    }
  },
  props: ['num'], // 父组件通过prop传递参数给子组件
  methods: {
    getSum(param, callback) {
      this.sum = +param + this.sum
      callback(this.sum) // 调用回调函数 将计算结果传给父组件
    }
  }
}
</script>

<style lang="less" scoped>
    .template_container {
        width: 200px;
        height: 100px;
        border: 1px solid black;
        margin: 10px;
        padding: 10px;
    }
</style>

步骤分解

1. 点击父组件中的累加按钮，触发add方法
2. 在add方法中通过this.$refs.child指向子组件的vue实例，并且调用子组件的getSum()，传递了两个参数，分别是待加的参数，和一个回调函数。
3. 子组件计算出结构后，调用回调函数，将计算结果传递给父组件

效果