如何在网站上做推广弄一个公司官网要怎么弄

在 Vue3 中，组件之间的数据传递主要有以下几种方式，适用于不同的场景：

---

一、父组件向子组件传值：props

1. 子组件定义 props

<!-- ChildComponent.vue -->
<script setup>
// 组合式 API（推荐）
const props = defineProps({title: {type: String,default: '默认标题'},count: {type: Number,required: true}
});
</script><template><div>{{ title }} - {{ count }}</div>
</template>

<!-- 选项式 API -->
<script>
export default {props: {title: String,count: {type: Number,required: true}}
}
</script>

2. 父组件传递数据

<template><ChildComponent :title="'Hello Vue3'" :count="42"/>
</template>

---

二、子组件向父组件传值：emit 事件

1. 子组件触发事件

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定义事件function increment() {emit('updateCount', 10); // 触发事件并传递数据
}
</script><template><button @click="increment">增加计数</button>
</template>

2. 父组件监听事件

<template><ChildComponent :count="count"@updateCount="count = $event" <!-- 接收子组件传递的值 -->/>
</template><script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

---

三、双向绑定：v-model

1. 子组件支持 v-model

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);function updateValue(newValue) {emit('update:modelValue', newValue);
}
</script><template><input :value="modelValue" @input="updateValue($event.target.value)">
</template>

2. 父组件使用 v-model

<template><ChildComponent v-model="text" /> <!-- 自动同步数据 -->
</template><script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>

---

四、跨层级传值：provide / inject

1. 祖先组件提供数据

<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>

2. 后代组件注入数据

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';const theme = inject('theme'); // 注入数据
</script><template><div :class="theme">当前主题：{{ theme }}</div>
</template>

---

五、通过 Context 共享数据（如 Pinia 状态管理）

1. 安装 Pinia

npm install pinia

2. 创建 Store

// stores/counter.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;}}
});

3. 组件中使用 Store

<template><div>Count: {{ counterStore.count }}</div><button @click="counterStore.increment()">+1</button>
</template><script setup>
import { useCounterStore } from '@/stores/counter';const counterStore = useCounterStore();
</script>

---

总结：不同场景的传值方式

场景	方法	适用性
父子组件直接通信	props + emit	父子层级明确，数据流单向
表单输入双向绑定	v-model	表单类组件（如输入框、下拉框）
跨层级组件通信	provide / inject	深层次嵌套组件（如全局配置、主题）
复杂应用状态共享	Pinia / Vuex	多组件共享状态（推荐中大型项目）

推荐实践：

• 优先使用 props 和 emit 实现父子通信。
• 简单双向绑定用 v-model，复杂逻辑用事件。
• 跨层级或全局状态使用 Pinia。
• 避免过度依赖 provide/inject，可能导致组件耦合。