请分析vue组件 传递属性，触发事件的过程

在 Vue 中，父组件可以通过属性(prop)的方式向子组件传递数据，子组件可以通过 $emit 方法触发事件，向父组件传递数据。

具体的传递过程如下：

1. 父组件定义子组件，并在模板中使用子组件，可以在子组件标签上通过属性的方式传递数据，例如：

<template>
  <div>
    <child-component :prop1="parentData" @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

2. 子组件定义 props 接收父组件传递的数据，可以在子组件内部使用 props 对象来声明需要接收的属性(prop)，例如：

export default {
  props: {
    prop1: {
      type: String,
      required: true
    }
  }
}

3. 子组件内部可以通过 $emit 方法触发自定义事件，并传递数据给父组件，例如：

export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'data from child component')
    }
  }
}

4. 父组件通过监听子组件触发的自定义事件，从而得到子组件传递的数据，例如：

export default {
  methods: {
    handleCustomEvent(data) {
      console.log(data) // 'data from child component'
    }
  }
}

总的来说，Vue 组件之间的数据传递是通过 props 和 $emit 实现的，父组件通过 props 向子组件传递数据，子组件通过 $emit 向父组件传递数据。这种数据传递机制实现了组件之间的解耦，使得组件之间的通信更加灵活和高效。