Vue 3 中,组件间传值有多种方式

在 Vue 3 中,组件间传值有多种方式,以下是几种常见的方式

父组件向子组件传值(通过 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 中常见的组件间传值方式,您可以根据具体的项目需求选择合适的方法。

相关推荐
天天扭码3 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪5 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&5 分钟前
css word
前端·css
Мартин.8 分钟前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜8 分钟前
快速静态界面 MDC规则约束 示范
前端
技术与健康22 分钟前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey29 分钟前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus
小小小小宇1 小时前
PC和WebView白屏检测
前端
三原1 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
天天扭码1 小时前
ES6 Symbol 超详细教程:为什么它是避免对象属性冲突的终极方案?
前端·javascript·面试