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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

一文轻松了解v-model及其修饰符
这篇文章主要给大家介绍了关于v-model及其修饰符的相关资料,v-model指令有三个可以选用的修饰符：.lazy、.number以及.trim,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-11-11
Vue指令的学习
这篇文章主要介绍了Vue指令，Vue官网一共有提供了14个指令，下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下
2021-10-10
在vue2.x里面简单使用socketio问题
这篇文章主要介绍了在vue2.x里面简单使用socketio问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue3中的常见组件通信之v-model使用详解
这篇文章主要介绍了Vue3中的常见组件通信之v-model使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
vue3 ts编写echart是tooltip无法展示的解决
这篇文章主要介绍了vue3 ts编写echart是tooltip无法展示的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue实现lodop打印功能的示例
这篇文章主要介绍了vue实现lodop打印功能的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
vue返回上一页面时不刷新问题及解决方案
这篇文章主要介绍了vue返回上一页面时不刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue起步(无cli)的啊教程详解
本文通过实例代码给大家介绍了Vue起步(无cli)的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
Vuex的初探与实战小结
这篇文章主要介绍了Vuex的初探与实战小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue中的inject学习教程
本文通过实例代码给大家介绍了vue中的inject学习教程，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04