Ant design Vue 父子组件传递（代码案例--不懂的地方可以私信本博主）

**Ant Design Vue 父子组件传递**

在 Ant Design Vue 中，父子组件之间的传递是非常重要的一环。通过正确的传递方式，可以实现组件之间的数据共享、事件触发等功能。在本文中，我们将详细介绍如何在 Ant Design Vue 中进行父子组件传递。

###1. 使用 Props首先，让我们来看看使用 Props 的方法。Props 是一种用于从父组件向子组件传递数据的方式。

**父组件代码**

html<template>
 <div>
 <p>父组件</p>
 <child-component :title="title" @click.native="handleClick"></child-component>
 </div>
</template>

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

export default {
 components: { ChildComponent },
 data() {
 return {
 title: 'Hello, World!'
 }
 },
 methods: {
 handleClick() {
 console.log('点击了子组件')
 }
 }
}
</script>

**子组件代码**

html<template>
 <div>
 <p>子组件 {{ title }}</p>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 props: ['title'],
 methods: {
 handleClick() {
 this.$emit('click')
 }
 }
}
</script>

在上面的代码中，我们使用了 `props` 属性来传递 `title` 值给子组件。同时，子组件通过 `$emit` 方法触发了一个事件，并将该事件传递回父组件。

###2. 使用 $emit除了使用 Props 之外，我们还可以使用 `$emit` 方法直接在子组件中触发事件，然后在父组件中捕捉该事件。

**子组件代码**

html<template>
 <div>
 <p>子组件</p>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$emit('click')
 }
 }
}
</script>

**父组件代码**

html<template>
 <div>
 <p>父组件</p>
 <child-component @click.native="handleClick"></child-component>
 </div>
</template>

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

export default {
 components: { ChildComponent },
 methods: {
 handleClick() {
 console.log('点击了子组件')
 }
 }
}
</script>

在上面的代码中，我们直接在子组件中触发了一个 `click`事件，然后在父组件中捕捉该事件。

###3. 使用 $on除了使用 `$emit` 之外，我们还可以使用 `$on` 方法监听事件，然后在父组件中捕捉该事件。

**子组件代码**

html<template>
 <div>
 <p>子组件</p>
 <button @click="handleClick">点击我</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$emit('click')
 }
 }
}
</script>

**父组件代码**

html<template>
 <div>
 <p>父组件</p>
 <child-component @click.native="handleClick"></child-component>
 </div>
</template>

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

export default {
 components: { ChildComponent },
 methods: {
 handleClick() {
 console.log('点击了子组件')
 }
 },
 mounted() {
 this.$on('click', () => {
 console.log('捕捉到了事件')
 })
 }
}
</script>

在上面的代码中，我们使用 `$on` 方法监听 `click`事件，然后在父组件中捕捉该事件。

### 总结通过本文的介绍，我们可以看到 Ant Design Vue 中父子组件传递是非常重要的一环。我们可以使用 Props、$emit 和 $on 等方法来实现组件之间的数据共享和事件触发。在实际开发中，需要根据具体需求选择合适的方法来进行父子组件传递。

如果您有任何问题或疑问，请私信本博主，我们将尽快回复。