Vue 中如何使用 props 传递数据？

推荐答案

在 Vue 中，props 是父组件向子组件传递数据的一种方式。子组件可以通过 props 选项来接收父组件传递的数据。以下是使用 props 传递数据的基本步骤：

1. 在父组件中传递数据： 在父组件中，通过在子组件的标签上使用 v-bind 或简写 : 来传递数据。

   // www.javascriptcn.com code example
   <template>
     <div>
       <ChildComponent :message="parentMessage" />
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         parentMessage: 'Hello from Parent'
       };
     }
   };
   </script>

2. 在子组件中接收数据： 在子组件中，通过 props 选项来声明接收的数据。可以指定 props 的类型、默认值等。

   // www.javascriptcn.com code example
   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       message: {
         type: String,
         required: true
       }
     }
   };
   </script>

本题详细解读

1. props 的基本概念

props 是 Vue 组件之间通信的一种方式，主要用于父组件向子组件传递数据。props 是单向数据流的，即数据只能从父组件流向子组件，子组件不能直接修改 props 的值。

2. props 的声明方式

在子组件中，可以通过数组或对象的形式来声明 props。

• 数组形式：

  props: ['message']

  这种方式简单，但无法指定类型和默认值。

• 对象形式：

  props: {
    message: {
      type: String,
      required: true,
      default: 'Default Message'
    }
  }

  这种方式可以指定 props 的类型、是否必传、默认值等。

3. props 的类型验证

Vue 提供了多种内置的类型验证，包括 String、Number、Boolean、Array、Object、Date、Function、Symbol 等。还可以通过自定义验证函数来进行更复杂的验证。

props: {
  message: {
    type: String,
    validator: function (value) {
      return value.length > 0;
    }
  }
}

4. props 的默认值

如果父组件没有传递 props，可以通过 default 选项来设置默认值。

props: {
  message: {
    type: String,
    default: 'Default Message'
  }
}

5. props 的传递方式

在父组件中，可以通过 v-bind 或简写 : 来动态绑定 props。

<ChildComponent :message="parentMessage" />

6. props 的单向数据流

props 是单向数据流的，子组件不能直接修改 props 的值。如果需要在子组件中修改数据，可以通过 data 或 computed 属性来创建一个局部变量。

data() {
  return {
    localMessage: this.message
  };
}

7. props 的命名规范

props 的命名推荐使用驼峰命名法（camelCase），但在模板中使用时，建议使用短横线分隔命名（kebab-case）。

props: {
  userInfo: {
    type: Object,
    required: true
  }
}

<ChildComponent :user-info="userInfo" />

通过以上方式，可以在 Vue 中有效地使用 props 进行组件间的数据传递。