在 Vue 3 中,组件间传值有多种方式,以下是几种常见的方式
-
- [父组件向子组件传值(通过 props):](#父组件向子组件传值(通过 props):)
-
- 以下是几个父组件向子组件传值的示例:
-
- [示例 1:传递字符串](#示例 1:传递字符串)
- [示例 2:传递数字](#示例 2:传递数字)
- [示例 3:传递对象](#示例 3:传递对象)
- [示例 4:传递数组](#示例 4:传递数组)
- [示例 5:传递布尔值](#示例 5:传递布尔值)
- 子组件向父组件传值(通过自定义事件):
-
- [子组件使用 v-model 向父组件传值的示例代码:](#子组件使用 v-model 向父组件传值的示例代码:)
- [通过 provide 和 inject:](#通过 provide 和 inject:)
- 在父组件和子组件中使用:
父组件向子组件传值(通过 props):
javascript
<!-- 父组件 -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const parentMessage = '这是来自父组件的值';
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script setup>
defineProps(['message']);
</script>
以下是几个父组件向子组件传值的示例:
示例 1:传递字符串
父组件:
javascript
<template>
<ChildComponent :message="messageFromParent" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
const messageFromParent = '这是来自父组件的消息';
</script>
子组件:
javascript
<template>
<div>{{ message }}</div>
</template>
<script setup>
defineProps(['message']);
</script>
示例 2:传递数字
父组件:
javascript
<template>
<ChildComponent :count="5" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
子组件:
javascript
<template>
<div>接收到的数字: {{ count }}</div>
</template>
<script setup>
defineProps(['count']);
</script>
示例 3:传递对象
父组件:
javascript
<template>
<ChildComponent :userInfo="{ name: '张三', age: 25 }" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
子组件:
javascript
<template>
<div>用户信息: {{ userInfo.name }}, {{ userInfo.age }}</div>
</template>
<script setup>
defineProps(['userInfo']);
</script>
示例 4:传递数组
父组件:
javascript
<template>
<ChildComponent :fruits="['苹果', '香蕉', '橙子']" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
子组件:
javascript
<template>
<div>水果列表:
<ul>
<li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
</ul>
</div>
</template>
<script setup>
defineProps(['fruits']);
</script>
示例 5:传递布尔值
父组件:
javascript
<template>
<ChildComponent :isActive="true" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
子组件:
javascript
<template>
<div v-if="isActive">当前状态为活跃</div>
<div v-else>当前状态为不活跃</div>
</template>
<script setup>
defineProps(['isActive']);
</script>
子组件向父组件传值(通过自定义事件):
javascript
<!-- 父组件 -->
<template>
<ChildComponent @childEvent="handleChildEvent" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
function handleChildEvent(valueFromChild) {
console.log('从子组件接收到的值:', valueFromChild);
}
</script>
<!-- 子组件 -->
<template>
<button @click="emitEvent">向父组件传值</button>
</template>
<script setup>
defineEmits(['childEvent']);
function emitEvent() {
const valueToSend = '这是来自子组件的值';
emit('childEvent', valueToSend);
}
</script>
子组件使用 v-model 向父组件传值的示例代码:
父组件:
html
复制
父组件接收到的值: {{ inputValue }}
子组件:
html
复制
<input type="text" :value="value" @input="$emit('update:value', $event.target.value)" />
在上述示例中,父组件通过 v-model:value="inputValue" 将 inputValue 与子组件进行绑定。子组件中的输入框的值通过 :value="value" 与父组件传来的值进行关联,当输入框的值发生变化时,通过 @input="$emit('update:value', $event.target.value)" 触发 update:value 事件并将新的值传递给父组件,从而实现子组件向父组件传值。
通过 provide 和 inject:
javascript
<!-- 父组件 -->
<template>
<ChildComponent />
</template>
<script setup>
import { provide } from 'vue';
provide('sharedValue', '这是共享的值');
</script>
<!-- 子组件 -->
<template>
<div>{{ sharedValue }}</div>
</template>
<script setup>
import { inject } from 'vue';
const sharedValue = inject('sharedValue');
</script>
使用 Vuex 状态管理:
首先安装 vuex :npm install vuex@next --save
创建一个 store.js 文件:
javascript
import { createStore } from 'vuex';
export default createStore({
state: {
commonValue: '这是全局的值',
},
mutations: {
updateCommonValue(state, newValue) {
state.commonValue = newValue;
}
},
actions: {},
getters: {}
});
在父组件和子组件中使用:
javascript
<!-- 父组件或子组件 -->
<template>
<div>{{ $store.state.commonValue }}</div>
</template>
<script setup>
import { useStore } from 'vuex';
const store = useStore();
function updateValue() {
store.commit('updateCommonValue', '新的值');
}
</script>
这些是 Vue 3 中常见的组件间传值方式,您可以根据具体的项目需求选择合适的方法。