vue3新手入门（7）非常实用vue3技巧props父组件向子组件传递数据

在Vue3中，组件之间的数据传递是构建复杂应用的关键。让我们通过一个简单的进度条组件案例，来深入了解如何使用props实现父组件向子组件传递数据。

父子组件通信的props机制

在Vue3中，我们可以通过props方式向子组件传递数据。这种方法非常常见且方便。首先，我们需要定义一个父组件，并在其中声明需要传递给子组件的数据。在父组件的 <template> 标签中，我们使用 : 符号来绑定props值。例如：

<template>
  <div class="process-parent">
    <div class="process-style" v-for="(item, index) in data" :key="index">
      <Process :curent-process="item" />
      <div class="process-button">
        <button @click="processAdd(index)">进度条增加1</button>
        <button @click="processDecrease(index)">进度条递减1</button>
      </div>
    </div>
  </div>
</template>

在父组件的 <script> 标签中，我们使用 import 语句引入子组件，并在 setup 函数中定义需要传递的数据。例如：

<script>
import { reactive } from "@vue/reactivity";
import Process from "../components/process.vue";
export default {
  components: {
    Process,
  },
  setup() {
    const data = reactive([
      {
        curentAll: 100,
        curentProcess: 30,
      },
      {
        curentAll: 100,
        curentProcess: 10,
      },
      {
        curentAll: 100,
        curentProcess: 50,
      },
      {
        curentAll: 100,
        curentProcess: 99,
      },
      {
        curentAll: 100,
        curentProcess: 100,
      },
    ]);

    function processAdd(index) {
      data[index].curentProcess++;
      console.log(data);
    }

    function processDecrease(index) {
      data[index].curentProcess--;
      console.log(data);
    }

    return {
      data,
      processAdd,
      processDecrease,
    };
  },
};
</script>

子组件接收props数据

接下来，我们需要定义子组件，并在其中接收父组件传递过来的props。在子组件的 <script> 标签中，我们使用 props 选项来声明需要接收的prop名称及相应的类型。例如：

<script>
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
export default defineComponent({
  name: "planProcess",
  props: {
    curentProcess: Object,
  },
  setup(props, context) {
    console.log(props.curentProcess, "传入值");
    //数据初始化
    const plan = reactive({
      curentAll: props.curentProcess.curentAll,
      curentProcess: props.curentProcess.curentProcess,
      process_x: 50,
      process_y: 50,
      process_r: 45,
    });
    //...
  },
});
</script>

常见错误与最佳实践

在使用props传递数据时，我们需要注意以下几点：

1. 确保在子组件中正确声明props。如果未正确声明，子组件将无法接收到父组件传递的数据。

2. 在父组件中传递props时，确保使用正确的语法。例如，使用 : 符号来绑定props值。

3. 对于复杂类型（如对象或数组），在子组件中接收props时，可以使用 reactive 或 ref 来确保数据的响应式。

4. 避免在子组件中直接修改props。如果需要修改，可以通过 $emit 触发事件，让父组件更新数据。

通过这个简单的进度条组件案例，我们可以看到Vue3中props传递数据的基本用法。这种方法不仅简单直观，而且非常灵活，可以满足大多数父子组件通信的需求。在实际开发中，我们还需要根据具体场景选择合适的组件通信方式，如 $emit 、 provide/inject 或 Vuex 等，以实现更复杂的数据共享和状态管理。