vue组件之间传参

在 Vue 中，组件之间传参可以使用 props 和事件两种方式。

1. Props

Props 是父子组件之间进行通信的一种方式。父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据。其基本用法如下：

父组件中：

<template>
  <child-component :prop-name="value"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      value: 'Hello World!'
    }
  }
}
</script>

子组件中：

<template>
  <div>{{ propName }}</div>
</template>
<script>
export default {
  props: {
    propName: {
      type: String,
      default: 'default value'
    }
  }
}
</script>

2. 事件

事件是子组件向父组件传递数据的一种方式。子组件通过 $emit 触发事件，并将数据作为参数传递给父组件。父组件通过 v-on 监听事件并接收参数。其基本用法如下：

父组件中：

<template>
  <child-component @event-name="handleEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  methods: {
    handleEvent(value) {
      console.log(value)
    }
  }
}
</script>

子组件中：

<template>
  <button @click="emitEvent">Click me</button>
</template>
<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('event-name', 'Hello World!')
    }
  }
}
</script>