vue2.x 中父组件通过props向子组件传递数据详细解读

1. 父组件向子组件传递数据的步骤

1. 在子组件中定义 props：

   子组件通过 props 选项声明它期望接收的数据。props 可以是数组形式（简单声明）或对象形式（支持类型检查和默认值）。

2. 在父组件中使用子组件时绑定 props：

   父组件通过 v-bind（或简写为 :）将数据传递给子组件的 props。

3. 子组件使用接收到的数据：

   子组件可以直接在模板或逻辑中使用 props 中的数据。

2. 示例代码

子组件 (ChildComponent.vue)

<template>
  <div>
    <h3>子组件</h3>
    <p>接收到的消息：{{ message }}</p>
    <p>接收到的数字：{{ number }}</p>
  </div>
</template>

<script>
export default {
  // 定义 props
  props: {
    // 接收一个字符串类型的 message
    message: {
      type: String,
      required: true, // 必传
    },
    // 接收一个数字类型的 number，默认值为 0
    number: {
      type: Number,
      default: 0, // 默认值
    },
  },
};
</script>

<style scoped>
div {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

父组件 (ParentComponent.vue)

<template>
  <div>
    <h2>父组件</h2>
    <input v-model="parentMessage" placeholder="输入消息" />
    <input v-model.number="parentNumber" placeholder="输入数字" />
    <button @click="sendData">传递数据</button>

    <!-- 使用子组件并绑定 props -->
    <ChildComponent :message="parentMessage" :number="parentNumber" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent, // 注册子组件
  },
  data() {
    return {
      parentMessage: 'Hello from Parent', // 父组件的数据
      parentNumber: 42, // 父组件的数据
    };
  },
  methods: {
    sendData() {
      alert('数据已传递给子组件');
    },
  },
};
</script>

<style scoped>
div {
  padding: 10px;
  border: 1px solid #000;
}
</style>

3. 代码解析

子组件 (ChildComponent.vue)

1. props 定义：

   • message：接收一个字符串类型的数据，且是必传的（required: true）。

   • number：接收一个数字类型的数据，默认值为 0。

2. 模板中使用 props：

   通过 {{ message }} 和 {{ number }} 显示父组件传递过来的数据。

父组件 (ParentComponent.vue)

1. 数据定义：

   parentMessage 和 parentNumber 是父组件的数据，通过 v-model 绑定到输入框。

2. 传递数据给子组件：

   使用 v-bind（简写为 :）将父组件的数据绑定到子组件的 props：

<ChildComponent :message="parentMessage" :number="parentNumber" />

1. 动态更新数据：

   当用户在输入框中修改数据时，parentMessage 和 parentNumber 会自动更新，并通过 props 传递给子组件。

4. 运行效果

1. 父组件显示两个输入框和一个按钮。

2. 用户在输入框中输入内容，点击按钮后，数据会传递给子组件。

3. 子组件实时显示父组件传递过来的数据。

5. 注意事项

1. props 是单向数据流：

   • 父组件向子组件传递数据是单向的，子组件不能直接修改 props 的值。

   • 如果子组件需要修改数据，可以通过 $emit 触发事件，通知父组件修改。

2. props 验证：

   可以通过 type、required、default 等选项对 props 进行验证，确保数据的正确性。

3. 动态 props：

   使用 v-bind 动态绑定 props，可以实现父组件数据变化时，子组件自动更新。