VUE3中的组件传值

一天只码五十行2024-03-01 20:19

一、父传子(props)

在子组件中可以使用defineProps接收父组件向子组件的传值

父组件fatherPage.vue：

html 复制代码 
<template>
  <div class="father">
    <button @click="a = a + 1">按钮</button>
    <childPage :a="a" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import childPage from "./childPage.vue";
const a = ref<number>(0);
</script>
<style scoped lang="less">
.father {
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 14, 17);
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    width: 100px;
    height: 60px;
    cursor: pointer;
  }
}
</style>

子组件childPage.vue：

html 复制代码 
<template>
  <div class="childPage">
    {{ a }}
  </div>
</template>
<script lang="ts" setup>
import { computed, defineProps } from "vue";
// 含默认值
// const porps = defineProps({
//   a: {
//     type: Number,
//     default: 0,
//   },
// });
const props = defineProps({ a: Number });
// 用computed使用props
const a = computed(() => props.a);
</script>
<style scoped lang="less">
.childPage {
  width: 100px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
</style>

效果：

二、子传父(emits)

在子组件中可以使用defineEmits向父组件传递信息。

父组件fatherPage.vue：

html 复制代码 
<template>
  <div class="father">
    {{ a }}
    <childPage @update:a="update" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import childPage from "./childPage.vue";
const a = ref<number>(0);
const update = (emitValue: number) => {
  a.value = emitValue;
};
</script>
<style scoped lang="less">
.father {
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 14, 17);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    width: 100px;
    height: 60px;
    cursor: pointer;
  }
}
</style>

子组件childPage.vue：

1.通过点击触发emit传值

html 复制代码 
<template>
  <div class="childPage">
    <button @click="updateA">按钮</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from "vue";

const a = ref<number>(0);
const emit = defineEmits(["update:a"]);
const updateA = () => {
  a.value++;
  emit("update:a", a.value);
};
</script>

<style scoped lang="less">
.childPage {
  width: 100px;
  height: 60px;
  button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

效果：

2.通过watch监听值的变化进行传值：

html 复制代码 
<template>
  <div class="childPage">
    <button @click="updateA">按钮</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, watch } from "vue";

const a = ref<number>(0);
const emit = defineEmits(["update:a"]);
const updateA = () => {
  a.value++;
  setTimeout(() => {
    updateA();
  }, 1000);
};
watch(a, (newValue) => {
  emit("update:a", newValue);
});
</script>

<style scoped lang="less">
.childPage {
  width: 100px;
  height: 60px;
  button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

效果：

三、父子组件进行双向绑定(v-model)

在子组件中可以使用defineModel与父组件进行双向绑定。注意：defineModel在vue3.3版本实验性使用，稳定版在vue3.4。

父组件：

html 复制代码 
<template>
  <div class="father">
    {{ a }}
    <childPage v-model="a" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import childPage from "./childPage.vue";
const a = ref<number>();
</script>
<style scoped lang="less">
.father {
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 14, 17);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    width: 100px;
    height: 60px;
    cursor: pointer;
  }
}
</style>

子组件:

html 复制代码 
<template>
  <div class="childPage">
    <button @click="updateA">按钮</button>
  </div>
</template>

<script lang="ts" setup>
import { defineModel } from "vue";

const a = defineModel({
  type: Number,
  default: 0,
});

const updateA = () => {
  a.value += 1;
};
</script>

<style scoped lang="less">
.childPage {
  width: 100px;
  height: 60px;
  button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

效果：

四、使用vuex进行组件通信

使用vuex可以进行组件之间的通信，父子组件与兄弟组件均可

在vuex文件index.ts中：

javascript 复制代码 
import { createStore } from "vuex";

export default createStore({
  state: {
    number: 0,
  },
  getters: {},
  mutations: {
    changeNumber(state, payload) {
      state.number = payload;
    },
  },
  actions: {},
  modules: {},
});

在第一个组件HomeView中：

javascript 复制代码 
<template>
  <div class="father">
    {{ a }}
    <AboutView />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useStore } from "vuex";
import AboutView from "./AboutView.vue";
const store = useStore();
const a = computed(() => store.state.number);
</script>
<style scoped lang="scss">
.father {
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 14, 17);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在第二个组件AboutView中：

javascript 复制代码 
<template>
  <div class="childPage">
    <button @click="updateA">按钮</button>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";

const store = useStore();
let a = 0;

const updateA = () => {
  a++;
  store.commit("changeNumber", a);
};
</script>

<style scoped lang="scss">
.childPage {
  width: 100px;
  height: 60px;
  button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

效果：

五、使用pinia进行组件通信

pinia有着与vuex类似的功能，同样可以实现组件间的通信。

在store的index.ts文件中：

javascript 复制代码 
import { defineStore } from "pinia";
import { ref } from "vue";
export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const changeCount = () => {
    count.value++;
  };

  return { count, changeCount };
});

在第一个组件fatherPage中：

javascript 复制代码 
<template>
  <div class="father">
    {{ count }}
    <childPage />
  </div>
</template>

<script lang="ts" setup>
import childPage from "./childPage.vue";
import { useCounterStore } from "../store/index";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count } = storeToRefs(store);
</script>
<style scoped lang="less">
.father {
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 14, 17);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    width: 100px;
    height: 60px;
    cursor: pointer;
  }
}
</style>

在第二个组件childPage中：

javascript 复制代码 
<template>
  <div class="childPage">
    <button @click="changeCount">按钮</button>
  </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from "../store/index";
const store = useCounterStore();
const { changeCount } = store;
</script>

<style scoped lang="less">
.childPage {
  width: 100px;
  height: 60px;
  button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

效果:

六、使用事件总线进行组件通信

我们可以利用第三方库比如说mitt以事件总线的方式实现传值

在mitt的index.ts中：

javascript 复制代码 
import mitt from "mitt";
const emitter = mitt();
export default emitter;

在第一个组件fatherPage中：

javascript 复制代码 
<template>
  <div class="father">
    {{ count }}
    <childPage />
  </div>
</template>

<script setup>
import childPage from "./childPage.vue";
import emitter from "@/mitt/index";
import { ref } from "vue";
const count = ref(0);
emitter.on("changeCount", (counter) => {
  count.value = counter;
});
</script>
<style scoped lang="less">
.father {
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 14, 17);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    width: 100px;
    height: 60px;
    cursor: pointer;
  }
}
</style>

在第二个组件childPage中：

html 复制代码 
<template>
  <div class="childPage">
    <button @click="changeCount">按钮</button>
  </div>
</template>

<script setup>
import emitter from "../mitt/index";
let a = 0;
const changeCount = () => {
  a++;
  emitter.emit("changeCount", a);
};
</script>

<style scoped lang="less">
.childPage {
  width: 100px;
  height: 60px;
  button {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>

效果：

七、更详细使用方式请参考以下文档

1，Vue.js - 渐进式 JavaScript 框架 | Vue.js

2，开始 | Vuex

3，Pinia | Pinia 中文手册 - 官网同步更新 v2.0.28

4，GitHub - developit/mitt: 🥊 Tiny 200 byte functional event emitter / pubsub.

相关推荐
前端若水14 分钟前
会话管理：创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger23 分钟前
mini-cc：一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵（互关）37 分钟前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态1 小时前
Ricon组态系统最佳实践：从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态1 小时前
Ricon组态系统vs传统组态软件：为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart1 小时前
Flutter进阶：OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe51 小时前
React 从入门到生产（四）：自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
XinZong2 小时前
OpenClaw 实现双重心跳（Heartbeat）+ clawreach虾聊项目实现
javascript
IT_陈寒3 小时前
Redis缓存击穿把我整不会了，原来还有这手操作
前端·人工智能·后端
idcu3 小时前
深入 Lyt.js 组件系统：L2 渲染引擎层的核心
前端·typescript
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？04CC-Switch & Claude 基于 Linux 服务器安装使用指南05【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07几个好用的ip纯净度检测网站08【AI】2026 年具身智能模型和世界模型总结09用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比10codex app每次打开重连5次Reconnecting问题解决