Vue3 组件传值

在Vue 3中，有多种方法可以进行组件之间的传值。下面是一些常用的方法：

1. Props：通过在父组件中使用v-bind指令将数据传递给子组件。在子组件中，使用props选项接收传递的数据。

<!-- 父组件 -->
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

2. Provide / Inject：通过在父组件中使用provide选项提供数据，然后在子组件中使用inject选项注入数据。

<!-- 父组件 -->
<template>
  <child-component></child-component>
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('message', 'Hello Vue 3!');
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}
</script>

3. Emit：通过在子组件中使用$emit方法触发自定义事件，然后在父组件中使用v-on指令监听该事件。

<!-- 父组件 -->
<template>
  <child-component @custom-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log(data); // 处理子组件传递的数据
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="$emit('custom-event', 'Hello from child!')">Click me</button>
</template>

4. Provide / Inject（Composition API）：与上述的Provide / Inject类似，但在Composition API中使用provide和inject函数来提供和注入数据。

<!-- 父组件 -->
<template>
  <child-component></child-component>
</template>

<script>
import { provide, ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');
    provide('message', message);
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}
</script>

这些方法提供了不同的传值方式，可以根据具体的需求选择适合的方法。无论是使用Props还是Provide / Inject，都能实现组件之间的数据传递。