父子组件传参过程

父子组件之间传参的过程可以分为两种情况：

1. 父组件向子组件传递参数

父组件可以通过在子组件标签上添加属性的方式向子组件传递参数。子组件可以通过 `props` 属性来接收这些参数，然后在组件中使用。

例如，在父组件中传递一个名为 `name` 的参数给子组件：

<template>
  <div>
    <ChildComponent :name="myName" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myName: 'Tom'
    }
  }
}
</script>

在子组件中通过 `props` 属性接收参数：

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

2. 子组件向父组件传递参数

子组件向父组件传递参数需要使用自定义事件，子组件通过 `$emit()` 方法触发自定义事件，并传递参数。父组件通过在子组件标签上添加事件监听器来接收自定义事件，并获取参数。

例如，在子组件中触发一个名为 `update` 的自定义事件，并传递一个名为 `value` 的参数：

<template>
  <div>
    <button @click="updateValue">Update</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateValue() {
      this.$emit('update', 'new value')
    }
  }
}
</script>

在父组件中通过在子组件标签上添加 `@update` 事件监听器来接收自定义事件，并获取参数：

<template>
  <div>
    <ChildComponent @update="handleUpdate" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleUpdate(newValue) {
      console.log(newValue)
    }
  }
}
</script>