vue3父子组件传递方法

在 Vue.js 3 中，父子组件之间的通信可以使用 props 和 emit。

1. Props

Props 是父组件向子组件传递数据的一种方式。在父组件中，可以通过在子组件标签上绑定属性的方式来传递数据。子组件中通过 props 选项来接收数据。

父组件中：

<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件中：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

2. Emit

Emit 是子组件向父组件发送消息的一种方式。在子组件中，可以通过 $emit 方法来触发一个自定义事件。父组件通过在子组件标签上绑定事件的方式来监听该自定义事件。

子组件中：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
}
</script>

父组件中：

<template>
  <ChildComponent @message-sent="receiveMessage" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message); // 'Hello from child'
    }
  }
}
</script>