Vue3——组件传参看这一篇就够了！！！

在Vue 3中，组件传参有多种方式，包括props、事件、插槽等。以下是Vue 3中常用的组件传参语法。

1. Props（属性）传递

• 在父组件中通过props属性传递数据给子组件。
• 子组件需要在props选项中声明接收的属性。
• 父组件使用子组件时，通过属性绑定的方式传递数据。

// 父组件.vue
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

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

// 子组件
<script>
export default {
  props: {
    message: String
  }
};
</script>

2. 事件传递

• 子组件可以通过$emit方法触发事件，父组件监听这些事件。
• 父组件通过在子组件标签上绑定事件处理函数来接收子组件触发的事件。

// 子组件.vue
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Message from Child');
    }
  }
};
</script>

// 父组件.vue
<template>
  <ChildComponent @message-sent="handleMessage" />
</template>

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

export default {
  methods: {
    handleMessage(message) {
      console.log('Received message:', message);
    },
  },
  components: {
    ChildComponent
  }
};
</script>

3. 插槽传递

• 插槽允许父组件向子组件传递DOM结构。
• 子组件通过具名插槽或默认插槽来接收父组件传递的内容。

// 父组件.vue
<template>
  <ChildComponent>
    <p>Content from Parent</p>
  </ChildComponent>
</template>

// 子组件.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>