Vue3 的传值方式

在 Vue3 中，常见的传值方式有以下几种:

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 component'
    }
  }
}
</script>

在子组件中，可以通过 props 选项来接收父组件传递过来的数据。

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

2. provide / inject

在 Vue3 中，可以使用 provide 和 inject 方法来进行跨级组件的数据传递。provide 可以在父组件中提供数据，而 inject 可以在子组件中注入数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = 'Hello from parent component'

    provide('message', message)
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')

    return {
      message
    }
  }
}
</script>

3. $attrs / $listeners

在 Vue3 中，可以使用 $attrs 和 $listeners 来进行组件之间的传递。$attrs 可以将父组件中没有被 props 所定义的属性传递给子组件，而 $listeners 可以将父组件中的事件传递给子组件。

<!-- ParentComponent.vue -->
<template>
  <child-component message='Hello from parent component' @click='handleClick'></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked from parent component')
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div v-bind='$attrs' v-on='$listeners'>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

以上是 Vue3 中常见的传值方式，可以根据具体情况选择合适的方式进行数据传递。