vue中父组件给子组件传递数据

基本原理
- 在Vue中，父组件向子组件传递数据是通过自定义属性（props）来实现的。props是一个数组或对象，用于接收从父组件传递过来的数据。
使用步骤
- 定义子组件的props属性
  - 在子组件的JavaScript部分（可以是Vue.extend方式创建组件或者ES6的export default方式）定义props。
  - 例如，有一个简单的子组件ChildComponent.vue，它接收一个名为message的数据：
    javascript 复制代码
```
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  // 组件的其他选项，如模板、方法等
  template: '<div>{{ message }}</div>'
}
```
  - 这里props中的message定义了接收的数据类型为String，并且是必须的（required: true）。如果数据不是必须的，可以设置required: false，并且可以设置默认值default，例如：
    javascript 复制代码
```
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  template: '<div>Count: {{ count }}</div>'
}
```
- 在父组件中使用子组件并传递数据
  - 在父组件的模板中使用子组件，并通过自定义属性的方式传递数据。例如，有一个父组件ParentComponent.vue：
    html 复制代码
```
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>
```
  - 在父组件的模板中，<ChildComponent :message="parentMessage" />这一行就是使用子组件并传递数据。:（v - bind的缩写）用于动态绑定数据，将父组件中的parentMessage数据传递给子组件的message属性。
动态传递数据
- 除了传递静态数据，还可以动态传递数据。例如，当父组件中的数据根据用户交互或者其他事件发生变化时，传递给子组件的数据也会随之更新。
- 假设父组件中有一个按钮，点击按钮可以改变传递给子组件的数据：
  html 复制代码
```
<template>
  <div>
    <button @click="changeMessage">Change Message</button>
    <ChildComponent :message="parentMessage" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Initial Message'
    };
  },
  methods: {
    changeMessage() {
      this.parentMessage = 'New Message';
    }
  }
};
</script>
```
  - 这里定义了一个changeMessage方法，当按钮被点击时，会改变parentMessage的值，子组件接收到的message数据也会相应地更新，因为Vue会自动检测数据的变化并更新DOM。

对象和数组的传递

可以传递对象和数组等复杂数据类型。例如，父组件传递一个包含用户信息的对象给子组件：

html 复制代码

<template>
  <div>
    <ChildComponent :user="userInfo" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      userInfo: {
        name: 'John',
        age: 30
      }
    };
  }
};
</script>

在子组件中，可以像访问普通属性一样访问对象的属性：

javascript 复制代码

export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  template: '<div>Name: {{ user.name }}, Age: {{ user.age }}</div>'
}

对于数组的传递也是类似的，父组件传递一个数组，子组件通过props接收并使用。例如，父组件传递一个商品列表给子组件：

html 复制代码

<template>
  <div>
    <ChildComponent :products="productList" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      productList: [
        {
          id: 1,
          name: 'Product 1',
          price: 10.0
        },
        {
          id: 2,
          name: 'Product 2',
          price: 20.0
        }
      ]
    };
  }
};
</script>

子组件可以遍历数组并显示商品信息：

javascript 复制代码

export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  template: '<div v - for="product in products">{{ product.name }} - ${{ product.price }}</div>'
}