Vue 组件正向数据传递

Vue 组件正向传递数据

简介

当在一个父组件中使用子组件时，需要子组件使用父组件提供的数据进行渲染组件，此时就需要父组件在使用子组件时，向子组件传递数据。

这个传递数据的过程类似函数调用，在主调函数中使用被调函数的功能，需要为被调函数传递参数。

比如，在一个商城项目中，希望所有的商品在展示时，都有相同的视觉展示效果，只是展示的商品数据不同，此时，就可以使用组件正向传递数据实现。

Vue 中使用 props 列表声明注册子组件用来接收数据的变量。

props 注册

props 是一种特别的 attributes，可以在组件上声明注册。需要子组件接收数据，必须先在子组件的 props 列表上声明它。

声明 props 列表在组合式 API 中使用 defineProps 宏来声明注册。

defineProps 介绍

defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入，声明的 props 会自动暴露给模板。

defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props。

一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。

子组件通过 props 接收了父组件传递过来的数据后，可以直接在组件中通过 props 声明注册的 prop 属性名使用数据。

props 声明及使用格式

<script setup>
    defineProps(['prop_xxx', ...])
</script>

<template>
  <h4>{{ prop_xxx }}</h4>
</template>

props 使用

当一个 prop 被注册后，可以在使用子组件时，以标签自定义属性形式使用，将数据传递给它。

<script setup>
    <组件名 prop属性名="值"> </组件名>
</script>

也可以通过 v-bind 属性方式来传递动态 prop 值的。当事先不知道要渲染的确切内容时，这一点特别有用。

<script>
    const var_xx = ref('')
    <组件名 :prop属性名=var_xx> </组件名>
</script>

整合示例

子组件 SC.vue

<script setup>
    defineProps(["title", "content"])
</script>

<template>
    <div class="sc">
        <h3> {{ title }} </h3>
        <p> {{ content }}</p>
    </div>
</template>

父组件 FC.vue

<script setup>

    import SC from './SC.vue';
    import {ref} from "vue"

    const content = ref("Vue 组件传递数据可以分为正向传递和反向传递，正向传递是父组件向子组件传递，通过 props 实现。")
</script>

<template>
    <h1>这是父组件中的内容</h1>
    <hr>
    <h2>这下面是子组件中的内容</h2>
    <!-- title 使用普通方式传递数据， content 使用v-bind方式传递动态数据 -->
    <SC title="Vue 组件传递数据" :content="content"></SC>
</template>

根组件App.vue

<script setup>
import FC from './components/MyComponents/FC.vue';
</script>

<template>
    <FC />
</template>

总结

父组件在使用子组件时，需要给子组件传递数据，可以使用 props 实现。
子组件使用 defineProps([]) 函数进行声明 prop 属性列表。
prop 只能以字符串形式声明注册，默认可以接收任何类型的数据。
父组件可以在使用子组件时，以自定义属性形式使用 prop 属性名为子组件传递数据。
使用 prop 属性名传递数据时，可以传递字面量值，也可以结合 v-bind 传递动态数据。