有关Ant Design Vue中父子之间进行传值的问题并不少见，作为一个后端程序员，当然也要学会，以下是一个简单的例子。
1、使用props：在父组件中定义一个属性，然后将其传递给子组件，在子组件中通过props接收该属性值。
父组件中：
<template> <div> <child-component :msg="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { message: 'Hello World!' } } } </script>
子组件中：
<template> <div> {{ msg }} </div> </template> <script> export default { props: { //这里使用'msg'其实也可以接收到对应父组件传来的数据。 msg: { type: String, required: true } } props: ['msg'] } </script>
2、使用emit：在子组件中定义一个事件，然后在父组件中监听该事件，接收子组件传递的数据。
父组件中：
<template> <div> //my-event 需要和子组件中定义的变量一致 可以随意定义。 <child-component @my-event="handleEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { //用于接收字组件传值的方法。 handleEvent(data) { console.log(data) } } } </script>
子组件中：
<template> <div> <button @click="emitEvent">Click me</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('my-event', 'Hello World!') } } } </script>
ok 经过上面的步骤 就可以简单的实现父子之间组件的通信问题了~ 🎉
