溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue組件傳值有什么方法

發(fā)布時(shí)間：2021-10-27 16:53:16 來源：億速云 閱讀：159 作者：小新 欄目：編程語言

這篇文章主要為大家展示了“vue組件傳值有什么方法”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue組件傳值有什么方法”這篇文章吧。

vue組件傳值的五種方法：1、父組件向子組件進(jìn)行傳值；2、子組件向父組件進(jìn)行傳值；3、相鄰兄弟組件間進(jìn)行傳參；4、遠(yuǎn)兄弟組件間進(jìn)行傳參；5、EventBus傳參。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vue的通信方式，也可以說是傳參方式：

  • 父組件向子組件進(jìn)行傳值：

  • 子組件向父組件進(jìn)行傳值：

  • 相鄰兄弟組件間進(jìn)行傳參（親兄弟）

  • 遠(yuǎn)兄弟傳參（表兄弟）

  • EventBus傳參

一、父子傳參

原理：父控制子，通過子組件的props屬性，拋出子組件自定義標(biāo)簽屬性，來接收父組件的操作狀態(tài)
例子：父級(jí)里的一個(gè)按鈕，控制子組件里的一個(gè)p的顯示隱藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<style>
    .div{
        width:200px;
        height:200px;
        background:pink;
    }
</style>

<body>
    <!-- 這里的app范圍就是  子組件son  的父級(jí) -->
    <div id="app">
        <button @click='change'>父按鈕</button>
        <hr>
        <!-- **********  自定義標(biāo)簽屬性test,接收父級(jí)的state ************-->
        <son :test='state'></son>
    </div>

    <template id="tp1">
        <div>
            <!-- ************  調(diào)用自定義屬性test **************-->
            <div v-show='test'>我是子組件的div</div>
        </div>
    </template>

    <script src="../vue/vue.js"></script>
    <script>
        // 局部定義  子組件son
        new Vue({
            el:"#app",
            data:{
                state:true
            },
            methods:{
                change(){
                    this.state = !this.state;
                }
            },
            components:{
                son:{
                    template:"#tp1",
                    //*********** 拋出自定義標(biāo)簽屬性 ***************
                    props:['test']
                }
            }
        })
    </script>

</body>
</html>

效果：

vue組件傳值有什么方法

二、子父?jìng)鲄?/h3>

原理：子控制父，子組件綁定自定義事件，來處理父組件的方法函數(shù)，通過.$emit(‘自定義事件’,[參數(shù)])來觸發(fā)屬于自己的自定義事件
例子：子組件里一個(gè)按鈕，控制父組件里的一個(gè)p的顯示隱藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style>
    .div{
        width:200px;
        height:200px;
        background:pink;
    }
</style>

<body>

<div id="app">
        <c1></c1> 
    </div>
    
     <!-- 父組件c1   子組件c2   子組件自定義事件test-->

    <template id="c1">
        <div>
            <div v-show='state'>father顯示/隱藏</div>
            <hr>
            <!--************ 子組件c2自定義事件,執(zhí)行父組件c1的方法函數(shù)change_f ***************** -->
            <c2 @test='change_f'></c2>
        </div>
    </template>

    <template id="c2">
        <div>
            <button @click='change_son'>子按鈕</button>
        </div>
    </template>

<!-- 引入Vue.js框架文檔，可在官方文檔下載-->
<script src='../vue/vue.js'></script>
<script>
    //全局定義
    // 實(shí)例化 父組件c1
    Vue.component("c1",{
        template:"#c1",
        data(){
            return {
                state:true
            }
        },
        methods:{
            change_f(){
                this.state = !this.state;
            }
        }
    })
    // 實(shí)例化 子組件c2
    Vue.component("c2",{
        template:"#c2",
        methods:{
            change_son(){
                // ************ 在子組件方法里，觸發(fā)子組件自定義事件 ******************
                this.$emit("test")
            }  
        }
    })
    //實(shí)例化一個(gè)Vue對(duì)象
new Vue({
        el:"#app"
    })
</script>
</body>
</html>

效果：

vue組件傳值有什么方法

三、相鄰兄弟傳參（親兄弟）

原理：通過一個(gè)公有的父元素作為橋接（實(shí)例 組件），結(jié)合父子props 傳參 、子父自定義事件

例子：c1、c2是兄弟關(guān)系 c1可用控制c2里元素的顯示隱藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>

<body>
<div id="app">
父級(jí)狀態(tài)
<p>{{state}}</p>
<hr>
<c1 @test_c1='change_f'></c1>
<hr>
<c2 :test_c2='state'></c2>
</div>

<template id="c1">
<div>這里是c1組件
<button @click='change_c1'>c1按鈕</button>
</div>
</template>

<template id="c2">
<div>這里是c2組件,狀態(tài)：{{test_c2}}
<div v-show='test_c2'>我是c2中的div</div>
</div>
</template>

<script src='../vue/vue.js'></script>
<script>

Vue.component("c2",{
template:"#c2",
props:['test_c2']
})

Vue.component("c1",{
template:"#c1",
methods:{
change_c1(){
this.$emit("test_c1")
}
}
})

new Vue({
el:"#app",
data:{
state:true
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
</script>
</body>
</html>

效果：

vue組件傳值有什么方法

四、遠(yuǎn)兄弟傳參（表兄弟）

原理：通過創(chuàng)建一個(gè)中間實(shí)例，注冊(cè)一個(gè)事件，在被控組件中，通過事件攜帶要執(zhí)行的函數(shù)，在主控組件中，通過事件，改變相應(yīng)的操作

vue組件傳值有什么方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
這是父組件
<hr>
<son1></son1>
<hr>
<son2></son2>
</div>
</template>
<template id="son1">
<div>
{{name}}
<button @click='click_son1'>觸發(fā)angle中間事件</button>
</div>
</template>
<template id="son2">
<div>
{{name}}
</div>
</template>

<script src='../vue/vue.js'></script>
<script>
//********** 創(chuàng)建一個(gè)angle實(shí)例，作為中間變量(全局) **************
let angel = new Vue();

new Vue({
el:"#app",
components:{
father:{
template:"#father",
components:{
son1:{
template:"#son1",
data(){
return {
name:"我是son1"
} 
},
methods:{
click_son1(){
// ***************  通過angel注冊(cè)的test事件，修改son2中name的值 ************
angel.$emit('test','哈哈！修改成功！')
}
}
},
son2:{
template:"#son2",
data(){
return {
name:"我是son2"
}
},
methods:{
change(val){
this.name = val;
}
},
//生命周期，自動(dòng)執(zhí)行，組件準(zhǔn)備ok就可用
mounted(){
// ***************  通過angel注冊(cè)的test事件，將son1的修改方法傳過去 ************
angel.$on('test',this.change)
}
}
}
}
}
})
</script>

</body>
</html>

效果：

點(diǎn)擊前：

vue組件傳值有什么方法
點(diǎn)擊后：

vue組件傳值有什么方法

五、EventBus傳參

1.在main.js種掛載全局EventBus

Vue.prototype.$EventBus = new Vue()

2.A組件

<template>
    <div class="wrap">
        <div>我是組件A</div>
        <button @click="sendMsg">發(fā)送</button>
    </div>
</template>

<script>
    export default {
        name: "A",
        methods:{
            sendMsg(){
               this.$EventBus.$emit('sendMsg',"這是組件A發(fā)送的消息！")
            }
        }
    }
</script>

3.B組件

<template>
    <div>
        <div>我是組件B</div>
    </div>
</template>

<script>
    export default {
        name: "B",
        mounted(){
            this.$EventBus.$on('sendMsg',(msg)=>{
                console.log(msg);//這是組件A發(fā)送的消息！
            })
        },
    }
</script>

通過掛載全局Vue對(duì)象傳遞參數(shù)。

以上是“vue組件傳值有什么方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手