ts vue3 父子组件传值

在 Vue3 中，父子组件之间传值可以使用 props 和 emit。

1. 使用 props

在父组件中，通过 props 将数据传递给子组件：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

在子组件中，通过 props 接收父组件传递过来的数据：

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

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

2. 使用 emit

在子组件中，通过 emit 触发自定义事件并传递数据：

<template>
  <button @click="sendMessage">Send message to parent</button>
</template>

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

在父组件中，通过 v-on 监听子组件触发的自定义事件并接收数据：

<template>
  <child-component @send-message="receiveMessage"></child-component>
</template>

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

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