vue如何利用store实现两个平行组件间的传值
目录
- store实现两个平行组件间的传值
- 方法：利用store.js传值
- 平行组件传值的步骤
- 1.布好局
- 2.在ccc模板中用mounted函数接收
- 完整代码如下
store实现两个平行组件间的传值
需求：把Login.vue的username传到Index.vue中显示出来
方法：利用store.js传值
Login.vue
登录后跳转
store.js
定义变量并从Login.vue中获取值
Index.vue
定义变量，利用computed获取变量的值
平行组件传值的步骤
1.布好局
然后新建一个对象var vue1=new Vue({})，利用vue1这个新对象作为中介传值，
然后用 vue1.$emit("isa",this.aaa) 即把this.aaa赋给isa
methods:{
tapa(){
vue1.$emit("isa",this.aaa)
}
}
2.在ccc模板中用mounted函数接收
用 $on( "isa",function(msg){ msg即为接收isa的值 })
mounted() {
var that = this;
vue1.$on("isa",function(msg1){
that.isa=msg1
})
vue1.$on("isb",function(msg2){
that.isb=msg2
})
},
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>平行组件</h1> <hr>
<v-a></v-a> <hr>
<v-b></v-b> <hr>
<v-c></v-c> <hr>
</div>
<template id="aaa">
<div>
<h1>aaaa</h1>
<h3>{{aaa}}</h3>
<button @click="tapa()">a给CCC传值</button>
</div>
</template>
<template id="bbb">
<div>
<h1>bbbb</h1>
<h3>{{bbb}}</h3>
<button @click="tapb()">b给CCC传值</button>
</div>
</template>
<template id="ccc">
<div>
<h1>cccc</h1>
<h3>aaaa值:{{isa}}</h3>
<h3>bbbb值:{{isb}}</h3>
</div>
</template>
</body>
<script>
var vue1=new Vue({})
var vue = new Vue({
el:"#app",
data:{
},
components:{
"v-a":{
template:"#aaa",
data:function (){
return {
aaa:"这是a的值"
}
},
methods:{
tapa(){
vue1.$emit("isa",this.aaa)
}
}
},
"v-b":{
template:"#bbb",
data:function (){
return {
bbb:"这是b的值"
}
},
methods:{
tapb(){
vue1.$emit("isb",this.bbb)
}
}
},
"v-c":{
template:"#ccc",
data:function (){
return {
isa:"",
isb:""
}
},
mounted() {
var that = this;
vue1.$on("isa",function(msg1){
that.isa=msg1
})
vue1.$on("isb",function(msg2){
that.isb=msg2
})
},
}
}
})
</script>
</html>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
分享Vue子组件接收父组件传值的3种方式
目录 1.简单声明接收 2.接收数据的同时进行 类型限制 3.接收数据的同时对 数据类型.必要性.默认值 进行限制 父组件代码↓ <template> <div> <div>父组件</div> <Student :name="name" :age="age"></Student> </div> </template> <
-
vue3 父子组件传值详解
现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr
-
vue3父子组件传值中props使用细节浅析
目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p
-
浅析vue中的组件传值
目录 一.正向传值 验证写法 props验证 更多验证 二.逆向传值 自定义事件 实现逆向传值 三.同胞传值/兄弟传值 low的方式(了解) 中央事件总线 eventBus 前言: 只要是做项目,组件和组件之间的传值是不可避免的,那么怎样才能完成组件之间的传值呢?我总结了以下几点,若有不足,欢迎补充 一.正向传值 基本写法: props:[“接收变量1”,“接收变量2”.......] 使用: 1,在需要接收数据的子组件中,定义props设置接收变量 <template> <div>
-
vue如何利用store实现两个平行组件间的传值
目录 store实现两个平行组件间的传值 方法:利用store.js传值 平行组件传值的步骤 1.布好局 2.在ccc模板中用mounted函数接收 完整代码如下 store实现两个平行组件间的传值 需求:把Login.vue的username传到Index.vue中显示出来 方法:利用store.js传值 Login.vue 登录后跳转 store.js 定义变量并从Login.vue中获取值 Index.vue 定义变量,利用computed获取变量的值 平行组件传值的步骤 1.布好局 然后
-
如何利用js在两个html窗口间通信
场景:当A页面打开B页面,在B页面操作后,A页面需要同步变更数据时 A 页面 ,http://127.0.0.1:10001/A.html var domain = 'http://127.0.0.1:10001'; window.open('http://127.0.0.1:10001/B.html'); window.addEventListener('message', function (event) { if (event.origin !== domain) return; cons
-
vue 进阶之实现父子组件间的传值
本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g
-
Vue和React组件之间的传值方式详解
在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式 组件的传值场景无外乎以下几种: 父子之间 兄弟之间 多层级之间(孙子祖父或者更多) 任意组件之间 父子之间 Vue Vue是基于单项数据流设计的框架,但是提供了一些的语法,指令去实现一些操作 父->子:通过props进行传递数据给子组件 子->父:通过emit向父组件传值 同时,还有一些其他进行父子组件通信的方式,通过$parent和$children获取组件的父或者子组件的实例,之后通过实例对象去修
-
Vue如何实现组件间通信
1. 父子间通信 最常见的就是父子之间的通信,通信是双向的数据传递. 1.1 父组件 --> 儿子组件 父组件向儿子组件传递数据的方式就是 通过 Prop 向子组件传递数据. //child.vue <template> <div> 我是儿子,我收到来自父亲的数据为 {{value}} </div> </template> <script> export default { props:{ value: String } } //App.v
-
深入浅析Vue不同场景下组件间的数据交流
正文 浅谈Vue不同场景下组件间的数据"交流" Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是"方法论",而不是"场景论",这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据"交流"的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传
-
vue两个组件间值的传递或修改方式
1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不 能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display
-
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si
-
vue中利用Promise封装jsonp并调取数据
Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败)两个结果. 这两个结果不会改变.然后结果结束后就会用then来执行相应的结果. new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成
-
vue中利用iscroll.js解决pc端滚动问题
项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直