vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值

更新時(shí)間：2022年04月24日 15:54:26 作者：南柯Seven

這篇文章主要介紹了vue如何利用store實(shí)現(xiàn)兩個(gè)平行組件間的傳值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

store實(shí)現(xiàn)兩個(gè)平行組件間的傳值

需求：把Login.vue的username傳到Index.vue中顯示出來(lái)

方法：利用store.js傳值

Login.vue

登錄后跳轉(zhuǎn)

store.js

定義變量并從Login.vue中獲取值

Index.vue

定義變量，利用computed獲取變量的值

平行組件傳值的步驟

1.布好局

然后新建一個(gè)對(duì)象var vue1=new Vue({})，利用vue1這個(gè)新對(duì)象作為中介傳值，

然后用 vue1.$emit("isa",this.aaa) 即把this.aaa賦給isa

?methods:{
? ? ? ? ? ? ? tapa(){
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ?vue1.$emit("isa",this.aaa)
? ? ? ? ? ? ? ?}
? ? ?}

2.在ccc模板中用mounted函數(shù)接收

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: