vue如何利用store实现两个平行组件间的传值

更新时间：2022年04月24日 15:54:26 作者：南柯Seven

这篇文章主要介绍了vue如何利用store实现两个平行组件间的传值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

store实现两个平行组件间的传值

需求：把Login.vue的username传到Index.vue中显示出来

方法：利用store.js传值

登录后跳转

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实现伸缩菜单功能
这篇文章主要为大家详细介绍了vue实现伸缩菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue复杂表格单元格合并根据数据动态合并方式
这篇文章主要介绍了vue复杂表格单元格合并根据数据动态合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
Vue设置select下拉框的默认选项详解(select空白bug解决)
最近开始学习vue,在学习的过程中遇到的问题将记录在这里,下面这篇文章主要给大家介绍了关于Vue设置select下拉框的默认选项(select空白bug解决)的相关资料,需要的朋友可以参考下
2022-12-12
在Vue3中使用provide和inject进行依赖注入的代码详解
在现代前端开发中,Vue.js已经成为了非常流行的框架之一,它提供了极大的灵活性和可维护性,今天我们要探讨的是Vue 3中的provide和inject功能,这是一种用于在组件树中进行依赖注入的方法,需要的朋友可以参考下
2024-06-06
基于vue2.0实现的级联选择器
这篇文章主要介绍了基于vue2.0实现的级联选择器，基于Vue的级联选择器，可以单项，二级，三级级联，多级级联，有兴趣可以了解一下
2017-06-06
vue项目如何刷新当前页面的方法
这篇文章主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue3在setup中使用mapState解读
这篇文章主要介绍了vue3在setup中使用mapState方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
详解vue route介绍、基本使用、嵌套路由
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue route介绍、基本使用、嵌套路由,需要的朋友可以参考下
2022-08-08
vue原理Compile从新建实例到结束流程源码
这篇文章主要为大家介绍了vue原理Compile从新建实例到结束流程源码，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue响应式原理及双向数据绑定示例分析
这篇文章主要为大家介绍了Vue响应式原理及双向数据绑定的示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07