vue3父组件和子组件如何传值实例详解

当一个Vue应用程序变得越来越庞大时，其组件数也会逐渐增加。在这些组件中，父组件通常会传递数据给它们的子组件，以便子组件可以使用这些数据。

在Vue 3中，父组件通过两种方式向子组件传递数据: props和slots。下面我们来详细讲解这两种传值方式。

Props传值

父组件通过props向子组件传递数据。子组件可以在模板中使用这些数据，或者在脚本中通过实例属性访问它们。下面是一个简单的示例来说明如何传递props。

<!-- 父组件 -->
<template>
  <child-component :message="hello"></child-component>
</template>

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

export default {
  name: 'ParentComponent',
  data() {
    return {
      hello: 'Hello, World!'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

这个例子中，父组件ParentComponent通过一个叫做hello的数据给子组件ChildComponent传递了一个名为message的props。子组件利用v-bind指令绑定了这个prop，然后在模板中使用它。

Slots传值

slots也是一种从父组件向子组件传递内容的方式。它允许父组件在其模板中插入子组件的内容。子组件可以通过插槽访问这些内容，然后在其模板中将其插入。

<!-- 父组件 -->
<template>
  <child-component>
    <h1>这是插槽的内容</h1>
  </child-component>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

在这个例子中，父组件通过一个包含子组件和一些插槽内容的child-component标签将内容传递给子组件。子组件通过定义一个slot元素，让父组件可以将内容插入它的模板中。

总的来说，在Vue 3中，父组件可以通过props和slots向子组件传递数据。props传递一个属性(prop)，而slots则传递内容。使用这两种传递方式，可以灵活地为组件之间建立联系。