vue3 父组件向子组件传值

在 Vue 3 中，父组件向子组件传值有多种方式可以实现。以下是其中几种常用的方法：

1. 使用 props 属性：通过在子组件中定义 props 属性来接收父组件传递的值。在父组件中使用子组件时，通过向子组件的 props 属性传递值即可。例如：

// 子组件 ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

// 父组件 ParentComponent.vue
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

2. 使用 v-bind 指令：v-bind 指令可以用来动态绑定属性值。在父组件中，使用 v-bind 指令将父组件的数据绑定到子组件的属性上。例如：

// 子组件 ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

// 父组件 ParentComponent.vue
<template>
  <div>
    <child-component v-bind:message="parentMessage"></child-component>
  </div>
</template>

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

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

3. 使用 provide/inject：在父组件中使用 provide 来提供数据，在子组件中使用 inject 来注入数据。这种方式允许跨多个层级的组件传递数据。例如：

// 子组件 ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
}
</script>

// 父组件 ParentComponent.vue
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from parent component'
    }
  }
}
</script>

这些方法都可以实现父组件向子组件传值的功能，你可以根据具体的需求选择适合的方法来使用。