vue3组件传值的方式以及使用

在Vue 3中，组件传值的方式和使用方法如下：

1. Props：父组件通过props向子组件传递数据。

<!-- Parent Component -->
<template>
  <ChildComponent :message="message" />
</template>

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

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

<!-- Child Component -->
<template>
  <div>{{ message }}</div>
</template>

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

2. Emit：子组件通过emit向父组件传递数据。

<!-- Parent Component -->
<template>
  <ChildComponent @messageUpdated="handleMessageUpdated" />
</template>

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

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

<!-- Child Component -->
<template>
  <button @click="updateMessage">Update Message</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$emit('messageUpdated', 'Hello from child');
    }
  }
};
</script>

3. Provide/Inject：祖先组件通过provide提供数据，后代组件通过inject来注入数据。

<!-- Ancestor Component -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor'
    };
  }
};
</script>

<!-- Child Component -->
<template>
  <div>{{ message }}</div>
</template>

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

4. Refs：父组件可以通过$refs来访问子组件，从而调用子组件的方法或获取子组件的数据。

<!-- Parent Component -->
<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="getChildMessage">Get Child Message</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildMessage() {
      const message = this.$refs.childComponent.message;
      console.log(message);
    }
  }
};
</script>

<!-- Child Component -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    };
  }
};
</script>

这些是Vue 3中常用的组件传值方式和使用方法。根据具体情况，选择适合的方式来实现组件之间的数据传递。