vue3组件之间的传参

在 Vue3 中，组件之间的传参可以使用 props 和 emit 等方式实现。

1. 使用 props

在父组件中，可以通过 props 将数据传递给子组件。父组件中的数据使用 v-bind 绑定到子组件的 props 上。

父组件：

<template>
  <div>
    <ChildComponent :message="parentMessage"/>
  </div>
</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 方法触发事件，父组件中使用 v-on 绑定事件处理函数。

父组件：

<template>
  <div>
    <ChildComponent v-on:child-message="handleChildMessage"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildMessage(message) {
      console.log(message)
    }
  }
}
</script>

子组件：

<template>
  <button v-on:click="emitMessage">Click me!</button>
</template>

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