VUE3中的组件传值

news2024/11/16 13:44:15

一、父传子(props)

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

父组件fatherPage.vue：

<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：

<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：

<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传值

<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监听值的变化进行传值：

<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。

父组件：

<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>

子组件:

<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中：

import { createStore } from "vuex";

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

在第一个组件HomeView中：

<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中：

<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文件中：

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中：

<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中：

<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中：

import mitt from "mitt";
const emitter = mitt();
export default emitter;

在第一个组件fatherPage中：

<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中：

<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.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1485857.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Python】进阶学习：pandas--groupby()用法详解

【Python】进阶学习：pandas--groupby()用法详解

&#x1f4ca;【Python】进阶学习&#xff1a;pandas–groupby()用法详解 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448;…
阅读更多...
全面整理！机器学习常用的回归预测模型

全面整理！机器学习常用的回归预测模型

Datawhale干货 作者&#xff1a;曾浩龙&#xff0c;Datawhale意向成员 前言 回归预测建模的核心是学习输入 到输出 &#xff08;其中 是连续值向量&#xff09;的映射关系。条件期望 是 到 的回归函数。简单来说&#xff0c;就是将样本的特征矩阵映射到样本标签空间。 图…
阅读更多...
spring boot 整合 minio存储 【安装篇】

spring boot 整合 minio存储 【安装篇】

一、minio是什么&#xff1f; MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存储服务接口&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象文件可以…
阅读更多...
每日OJ题_牛客_合法括号序列判断

每日OJ题_牛客_合法括号序列判断

目录 合法括号序列判断 解析代码 合法括号序列判断 合法括号序列判断__牛客网 解析代码 class Parenthesis {public:bool chkParenthesis(string A, int n){if (n & 1) // 如果n是奇数return false;stack<char> st;for (int i 0; i < n; i) {if (A[i] () {s…
阅读更多...
【Godot4.2】控件节点生成与布局函数库Ctl

【Godot4.2】控件节点生成与布局函数库Ctl

前言 本文依旧来自笔者的语雀知识库。基础内容写于2023年8月份。当时写的比较随意&#xff0c;本篇将在其基础上扩充和修改。 概述 Godot本身提供了丰富的控件和容器来实现UI布局&#xff0c;但是这个过程往往需要复杂的手动操作和配置&#xff0c;使用代码生成方式时也会需…
阅读更多...
java-ssm-jsp-宠物常规护理知识管理系统设计与实现

java-ssm-jsp-宠物常规护理知识管理系统设计与实现

java-ssm-jsp-宠物常规护理知识管理系统设计与实现 获取源码——》公主号&#xff1a;计算机专业毕设大全
阅读更多...
Ubuntu20.04: UE4.27 中 Source Code 的编辑器下拉框没有 Rider选项

Ubuntu20.04: UE4.27 中 Source Code 的编辑器下拉框没有 Rider选项

问题描述 最近想用 Rider 作为 UE4 开发的 IDE&#xff0c;但安装好 Rider 后&#xff0c;发现编辑器下拉框中没有 Rider 的选项&#xff0c;我检查了 UE4 的插件&#xff0c;发现 Rider Integration 插件已经安装且启用的。 环境&#xff1a;Ubuntu 20.04 UE4.27 Rider2023…
阅读更多...
设计模式（十四）中介者模式

设计模式（十四）中介者模式

请直接看原文: 原文链接:设计模式&#xff08;十四&#xff09;中介者模式_设计模式之中介模式-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 前言 写了很多篇设计模式的…
阅读更多...
洛谷 B3620 x 进制转 10 进制

洛谷 B3620 x 进制转 10 进制

题目描述 给一个小整数 x 和一个 x 进制的数 S。将 S 转为 10 进制数。对于超过十进制的数码&#xff0c;用 A&#xff0c;B&#xff0c;…… 表示。 输入格式 第一行一个整数 x; 第二行一个字符串 S。 输出格式 输出仅包含一个整数&#xff0c;表示答案。 输入输出样例…
阅读更多...
《TCP/IP详解 卷一》第12章 TCP初步介绍

《TCP/IP详解 卷一》第12章 TCP初步介绍

目录 12.1 引言 12.1.1 ARQ和重传 12.1.2 滑动窗口 12.1.3 变量窗口&#xff1a;流量控制和拥塞控制 12.1.4 设置重传的超时值 12.2 TCP的引入 12.2.1 TCP服务模型 12.2.2 TCP可靠性 12.3 TCP头部和封装 12.4 总结 12.1 引言 关于TCP详细内容&#xff0c;原书有5个章…
阅读更多...
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）

CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）

一点 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>css flex布局-画骰子</title><sty…
阅读更多...
Day13：信息打点-JS架构框架识别泄漏提取API接口枚举FUZZ爬虫插件项目

Day13：信息打点-JS架构框架识别泄漏提取API接口枚举FUZZ爬虫插件项目

目录 JS前端架构-识别&分析 JS前端架构-开发框架分析 前端架构-半自动Burp分析 前端架构-自动化项目分析 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/API接…
阅读更多...
OJ_重复者

OJ_重复者

题干 C实现 #include <stdio.h> #include <string.h> using namespace std; void square(int curSize, int patSize, char pattern[3000][3000], char picture[3000][3000], char last[3000][3000]) {if (curSize 1) {for (int i 0; i < patSize; i) {for (i…
阅读更多...
《高性能MYSQL》-架构，锁，事务

《高性能MYSQL》-架构，锁，事务

MYSQL的逻辑架构 第一层&#xff0c;客户端层&#xff1a;包含了连接处理&#xff0c;身份验证&#xff0c;确保安全性等 第二层&#xff0c;包含了mysql大部分的核心功能&#xff0c;查询解析&#xff0c;分析&#xff0c;优化&#xff0c;以及所有的内置函数&#xff08;例如…
阅读更多...
Redis--线程模型详解

Redis--线程模型详解

Redis线程模型 Redis内部使用的文件事件处理器&#xff08;基于Reactor模式开发的&#xff09;file event handler是单线程的&#xff0c;所以Redis线程模型才叫单线程模型&#xff0c;它采用IO多路复用机制同时监听多个socket&#xff0c;当被监听的socket准备好执行accep、r…
阅读更多...
深度相机xyz点云文件三维坐标和jpg图像文件二维坐标的相互变换函数

深度相机xyz点云文件三维坐标和jpg图像文件二维坐标的相互变换函数

深度相机同时拍摄xyz点云文件和jpg图像文件。xyz文件里面包含三维坐标[x,y,z]和jpg图像文件包含二维坐标[x&#xff0c;y],但是不能直接进行变换&#xff0c;需要一定的步骤来推演。 下面函数是通过box二维框[xmin, ymin, xmax, ymax, _, _ ]去截取xyz文件中对应box里面的点云…
阅读更多...
洛谷P5717 三角形分类

洛谷P5717 三角形分类

给出三条线段a,b,c 的长度&#xff0c;均是不大于 1000010000 的正整数。打算把这三条线段拼成一个三角形&#xff0c;它可以是什么三角形呢&#xff1f; 如果三条线段不能组成一个三角形&#xff0c;输出Not triangle&#xff1b;如果是直角三角形&#xff0c;输出Right tria…
阅读更多...
图的简单介绍

图的简单介绍

定义及术语 G(V,E)&#xff1a;图G的顶点集为V&#xff0c;边集为E。分为有向图和无向图两类。 顶点的度&#xff1a;与该结点相连的边的条数。 出度&#xff1a;顶点的出边条数 入度&#xff1a;顶点的入边条数 顶点的权值称为点权&#xff0c;边的权值称为边权。 存储 1.邻…
阅读更多...
Day14：信息打点-主机架构蜜罐识别WAF识别端口扫描协议识别服务安全

Day14：信息打点-主机架构蜜罐识别WAF识别端口扫描协议识别服务安全

目录 Web服务器&应用服务器差异性 WAF防火墙&安全防护&识别技术 蜜罐平台&安全防护&识别技术 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/…
阅读更多...
c++基础知识补充6

c++基础知识补充6

new相比malloc可以操作自定义类型 开空间的同时调用构造函数初始化 new,delete和malloc,free要分组使用&#xff0c;否则结果不确定 new和delete本质是malloc和free的封装
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023