组件的通信props：父组件给子组件用

在构建复杂的前端项目时，为了保持代码的可维护性和可重用性，我们会将界面分解为更小的组件。组件之间的通信是构建复杂应用的关键，其中一种常见的方法是使用props。

Props，即Properties的缩写，是指父组件传递给子组件的数据。在父组件中，我们可以通过props来传递数据给子组件。在子组件中，我们可以通过props来接收这些数据。

// 父组件
<div app>
  <child :name="name" :age="age"></child>
</div>

// 子组件
<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'age'],
}
</script>

在这个例子中，父组件将name和age这两个数据通过props传递给了子组件。在子组件中，我们通过props来接收这两个数据，并在模板中显示出来。

使用props的好处在于，它可以使组件之间保持松散耦合。父组件和子组件之间不需要知道彼此的内部实现细节，只需要通过props来传递数据即可。这使得组件更加容易维护和重用。

除了传递数据之外，我们还可以在props中传递函数。这样，子组件就可以调用父组件的方法。

// 父组件
<div app>
  <child :name="name" @click="handleClick"></child>
</div>

// 子组件
<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  props: ['name'],
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

在这个例子中，父组件将name数据和handleClick方法通过props传递给了子组件。在子组件中，我们通过props来接收这两个数据。当子组件中的按钮被点击时，会调用handleClick方法，并触发父组件的click事件。

使用props来传递函数的好处在于，它可以使组件之间更加灵活。子组件可以根据自己的需要来调用父组件的方法，而父组件不需要知道子组件的具体实现细节。