vue3父传子事件传参

在Vue 3中，父组件向子组件传递参数可以使用两种方式：props和emit。

1. 使用props：
在父组件中，通过在子组件标签上绑定属性来传递参数。例如：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    };
  }
};
</script>

在子组件中，通过props属性接收父组件传递的参数。例如：

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

<script>
export default {
  props: ['message']
};
</script>

这样子组件就可以使用`message`参数了。

2. 使用emit：
在父组件中，通过子组件的自定义事件来传递参数。例如：

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

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      // 处理子组件传递的参数
      console.log(payload);
    }
  }
};
</script>

在子组件中，通过`$emit`方法触发自定义事件，并传递参数。例如：

<template>
  <div>
    <button @click="emitCustomEvent">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      const payload = 'Hello from child component';
      this.$emit('custom-event', payload);
    }
  }
};
</script>

这样父组件就可以通过事件监听来获取子组件传递的参数了。

以上是Vue 3中父组件向子组件传递参数的两种方式。根据具体情况选择适合的方式来实现。