vue 组件之间通信的方式

1.父向子版  父组件设置自定义属性 子组件props接收

//父组件环境下
<my-demo :自定义属性名字="要传递的具体值"></my-demo>
//子组件
export default{
props:[自定义属性名字]
}

2.子向父版 父组件设置自定义方法并绑定接收的方法 子组件触发方法

//父组件环境下
<my-demo @自定义方法="绑定的方法"></my-demo>
export default{methods:{绑定的方法(v1){console.log(v1)//abb1}}
}
//子组件
export default{methods:{xxx(){this.$emit('自定义方法','abb1')//可以传多个参数}}
}

 3.全局事件总线  

//1.创建bus.js 文件 
// bus.js文件内容
import Vue from 'vue'
// export default new Vue()
const Bus = new Vue()
export default Bus//2.在main.js中使用
import Bus from './utils/bus' // 这是我的路径,正确引用你们的路径//3.在需要的地方触发事件
this.$bus.$emit('allclear',type)//4. 接收事件的地方接收并下一步处理mounted() {this.$bus.$on('allclear', (type) => {// console.log(type)if (type === this.fathercomname) {if (this.value) {this.value = undefined}}})
}

4.Vuex

用这个的话首先要装包或者创建工程的时候选择这个选项手脚架会给你装好

//新建store 文件
//文件内容
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
Vue.use(Vuex)//模块化
const store = new Vuex.Store({modules: {app,},getters
})export default store//模块化文件内容 具体的看自己的功能哈
import Cookies from 'js-cookie'//这个模块是用来检测屏幕视窗的
const state = {sidebar: {opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,withoutAnimation: false},device: 'desktop'
}const mutations = {TOGGLE_SIDEBAR: state => {state.sidebar.opened = !state.sidebar.openedstate.sidebar.withoutAnimation = falseif (state.sidebar.opened) {Cookies.set('sidebarStatus', 1)} else {Cookies.set('sidebarStatus', 0)}},CLOSE_SIDEBAR: (state, withoutAnimation) => {Cookies.set('sidebarStatus', 0)state.sidebar.opened = falsestate.sidebar.withoutAnimation = withoutAnimation},TOGGLE_DEVICE: (state, device) => {state.device = device}
}const actions = {toggleSideBar({ commit }) {commit('TOGGLE_SIDEBAR')},closeSideBar({ commit }, { withoutAnimation }) {commit('CLOSE_SIDEBAR', withoutAnimation)},toggleDevice({ commit }, device) {commit('TOGGLE_DEVICE', device)}
}export default {namespaced: true,state,mutations,actions
}//getter的内容
const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,
}
export default getters//在main.js导入
import store from './store'//在对应组件中使用
import { mapGetters } from "vuex";computed: {...mapGetters(['device']),},

5.路由

抽象一点说路由也算通信方式的一种吧 这种跨组件跨页面 路由传参 

//例子 
this.$router.push({name: "GanttChart",params: {id: id,business_file: business_file,},});

6.浏览器资源传参

有cookie  localstrage 之类的 总归不过是是get set 

import Cookies from 'js-cookie'//名字
const TokenKey = 'xxxxx'//向外导出一个获取的方法
export function getToken() {return Cookies.get(TokenKey)
}//向外导出一个设置的方法
export function setToken(token) {//过期时间跟着后台设置的时间 后台给的是一个时间戳 算了一下是当前时间30日后过期 return Cookies.set(TokenKey, token,{expires:30})
}//向外导出一个移除的方法
export function removeToken() {return Cookies.remove(TokenKey)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android简单控件

1.文本显示 设置文本内容的两种方式&#xff1a; 在XML文件中通过属性 android:text 设置文本 <resources><string name"app_name">chapter03</string><string name"hello">你好&#xff0c;世界</string> </resources&…

人逢三六九,运势低迷路难走

很多人都希望自己各方面的运势都能够朝着好的方向旺盛发展&#xff0c;我们的运势将会如何发展跟我们的出生时间是离不开关系的。我们的祖先为了后人着想&#xff0c;不犯他们犯过的错误&#xff0c;少走一些弯路&#xff0c;总结了多年来的生活经验&#xff0c;创造出了一句句…

前端表格使用vxe-table进行渲染,使用el-select进行选择合适的条件查询,且给el-select默认赋值及使用i18n进行翻译

前端表格使用vxe-table进行渲染&#xff0c;使用el-select进行选择合适的条件查询&#xff0c;且给el-select默认赋值及使用i18n进行翻译 一、项目需求及项目实现 一、项目需求及项目实现 表格页面使用vxe-table进行渲染&#xff0c;查询区使用el-select进行选择&#xff0c;且…

JS、Python实现AES加密,Python实现RSA加密,读txt每行数据存入列表

1. JS实现AES加密 var CryptoJS require(./package); // package文件是cryptoJS var plaintext {"did":"a","dname":"Chrome"};var key CryptoJS.lib.WordArray.create([929392180,1650538033,1681023538,1647784550 ]); var i…

拼多多API:从数据中挖掘商业价值的力量

随着大数据时代的来临&#xff0c;数据已经成为企业决策和创新的基石。拼多多API作为电商领域的重要接口&#xff0c;为企业提供了从数据中挖掘商业价值的机会。通过拼多多API&#xff0c;企业可以获取丰富的用户数据、商品数据和交易数据&#xff0c;从而深入了解市场需求、优…

metric,log

Metric&#xff08;指标&#xff09;和 Log&#xff08;日志&#xff09;是两种不同的监控数据类型&#xff0c;它们在监控和故障排查中有不同的用途和特点。 ### Metric&#xff08;指标&#xff09;: 1. 定义&#xff1a; Metric 是定量的度量&#xff0c;通常是数值或计数…

C++11新特性(也称c++2.0)

目录 1.输出C版本&#xff1a;cout << __cplusplus << endl; 2.Uniform Initialization(一致性初始化) 3.initializer_list&#xff08;形参&#xff09; 4.explicit 5.for循环的新用法 6.default和delete 7.Alias Template&#xff08;模板化名&#xff09…

LLaMA Efficient Tuning

文章目录 LLaMA Efficient Tuning安装 数据准备浏览器一体化界面单 GPU 训练 train_bash1、预训练 pt2、指令监督微调 sft3、奖励模型训练 rm4、PPO 训练 ppo5、DPO 训练 dpo 多 GPU 分布式训练1、使用 Huggingface Accelerate2、使用 DeepSpeed 导出微调后的模型 export_model…

Volcano Scheduler调度器源码解析

Volcano Scheduler调度器源码解析 本文从源码的角度分析Volcano Scheduler相关功能的实现。 本篇Volcano版本为v1.8.0。 Volcano项目地址: https://github.com/volcano-sh/volcano controller命令main入口: cmd/scheduler/main.go controller相关代码目录: pkg/scheduler 关联…

Vue3.x+Echarts (可视化界面)

Vue3.0Echarts &#xff08;可视化界面&#xff09; 1. 简介1.1 技术选型1.2 ECharts支持的数据格式1.3 ECharts使用步骤 2. ECharts图形2.1 通用配置2.2 柱状图2.3 折线图2.4 散点图2.5 直角坐标系常用配置2.6 饼图2.7 地图2.8 雷达图2.9 仪表盘2.10 小结 3. Vue3.2ECharts5数…

RecombiMAb anti-mouse VEGFR-2

DC101-CP132单克隆抗体是原始DC101单克隆的重组嵌合型抗体。可变结构域序列与原始DC101相同&#xff0c;但是恒定区序列已经从大鼠IgG1变为小鼠IgG2a。DC101-CP132单克隆抗体像原始大鼠IgG1抗体一样&#xff0c;不包含Fc突变。 DC101-CP132单克隆抗体能与小鼠VEGFR-2(血管内皮生…

docker容器内,将django项目数据库改为postgresql

容器为ubuntu20.04版本&#xff0c;新建了一套django项目&#xff0c;使用的默认sqllit3&#xff0c;换为postgresql&#xff0c;容器里安装postgresql方法 步骤1: 安装PostgreSQL数据库 # 打开一个bash会话在你的容器中 docker exec -it <container_id_or_name> bash#…

ZGC垃圾收集器介绍

ZGC&#xff08;The Z Garbage Collector&#xff09;是JDK 11中推出的一款低延迟垃圾回收器&#xff0c;它的设计目标包括&#xff1a; 停顿时间不超过10ms&#xff1b;停顿时间不会随着堆的大小&#xff0c;或者活跃对象的大小而增加&#xff1b;支持8MB~4TB级别的堆&#x…

【开题报告】基于JavaWeb的母婴用品在线商城的设计与实现

1.选题背景 随着社会经济的发展和人们生活水平的提高&#xff0c;母婴用品市场逐渐壮大。同时&#xff0c;互联网的普及和电子商务的兴起使得线上购物成为了人们方便快捷的购物方式之一。传统的实体母婴用品店面受到了线上商城的冲击&#xff0c;因此建立一个方便、快捷的在线…

微信小程序 获取地址信息(uniapp)

参考API地址&#xff1a;微信小程序JavaScript SDK | 腾讯位置服务 <script> // 引入SDK核心类&#xff0c;js文件根据自己业务&#xff0c;位置可自行放置var QQMapWX require(../../js/uploadImg/qqmap-wx-jssdk.js);export default {data(){return{qqmapsdk:}},onL…

【HarmonyOS4.0】第四篇-ArkUI基础实战

一、ArkUI框架简介 ArkUI开发框架是方舟开发框架的简称&#xff0c;它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架&#xff0c;它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具&#xff0c;帮助开发者提升应用界面开发效率 30%&#xff0c;开发…

Swift单元测试Quick+Nimble

文章目录 使用QuickNimble1、苹果官方测试框架XCTest的优缺点2、选择QuickNimble的原因&#xff1a;3、QuickNimble使用介绍集成&#xff1a;Quick关键字说明&#xff1a;Nimble中的匹配函数等值判断&#xff1a;使用equal函数是否是同一个对象&#xff1a;使用beIdenticalTo函…

Android14之刷机模式总结(一百七十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

电脑文件mfc100u.dll丢失的解决方法分析,怎么修复mfc100u.dll靠谱

mfc100u.dll丢失了要怎么办&#xff1f;其实很多人都遇到过这样的电脑故障吧&#xff0c;说这个mfc100u.dll文件已经不见了&#xff0c;然后一些程序打不开了&#xff0c;那么这种情况我们要怎么解决呢&#xff1f;今天我们就来给大家详细的说说mfc100u.dll丢失的解决方法。 一…