Vue,vue-cli,父子组件间相互通信

直接上代码！

首先定义一个子组件：

可以看到，子组件非常简单，就只有一个方法"foo(p1,p2)"

<template>
  <div class="app-container">I am child</div>
</template>

<script>
export default {
  method: {
    foo(data, callback) {
      alert("传递数据给子组件：" + data);
      callback("回调数据给父组件");
    },
  },
};
</script>

父组件代码如下：

<template>
  <div class="app-container">
    hello world
    <Child ref="child"/>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  created(){
    // 取得子组件对象
    let child =  this.$refs.child 

    // 调用子组件函数，并传递数据，及通过回调函数接收数据
    child.foo("188",new function(response){
        alert("收到子组件传递过来的数据："+response)
    }) 
  }
}
</script>

结束！这样父子组件间就可以完美地相互通信啦