vue3怎么实现左边图片，右边文字的效果

在Vue3中实现左边图片，右边文字的效果，你可以使用组件化思想结合HTML结构。首先，创建两个组件分别代表图片和文字内容。例如：

1. **ImageComponent.vue** (图片组件)

<template>
  <div class="image-container">
    <img :src="imageUrl" alt="图片描述" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
export default {
  props: {
    imageUrl: { type: String, required: true },
  },
};
</script>

2. **TextComponent.vue** (文字组件)

<template>
  <div class="text-container">
    {{ textContent }}
  </div>
</template>

<script setup>
export default {
  props: {
    textContent: { type: String, required: true },
  },
};
</script>

然后，在需要展示的地方组合这两个组件，并设置布局样式，比如使用Flexbox：

<template>
  <div class="container">
    <ImageComponent :imageUrl="imageUrl" />
    <TextComponent :textContent="textContent" />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}
.image-container {
  flex: 0 0 auto; /* 图片宽度自适应 */
}
.text-container {
  flex: 1; /* 文字占剩余空间 */
}
</style>

在这个例子中，`imageUrl` 和 `textContent` 可以通过数据绑定从父组件传递给子组件。