Vue中子组件响应父组件事件，并传递参数

父组件与子组件的关系

在Vue中，父组件可以通过 $refs来管理通过ref注册过的所有子组件，即 $refs对象下可以包含很多 $ref对象。

事件响应

分别定义两个组件 parent.vue 和 sub.vue

其中 parent.vue

//如果想要实际测试代码的话，请优先引入ant-desigin-vue
<template>
  <div>
    <a-button type="primary" @click="parentButtonClick">父组件事件分发按钮</a-button>
    //将子组件声明为child ref对象
    <subComponent ref="child"></subComponent>
  </div>
</template>

<script>
import subComponent from './subComponent'
export default {
  name: 'parent',
  components: {
    subComponent
  },
  methods: {
    parentButtonClick () {
      this.$refs.child.reciveParentMsg('点击父组件按钮发送的消息')
    }
  }
}
</script>

<style>
</style>

sub.vue

<template>
  <p>从父组件接收到的消息为：{{reciveMsg}}</p>
</template>

<script>
export default {
  data: function () {
    return {
      reciveMsg: ''
    }
  },
  methods: {
    reciveParentMsg (msg) {
      this.reciveMsg = msg
    }
  }
}
</script>

<style>

</style>