溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.$refs的使用場景
父組件調用子組件的方法，可以傳遞數據。
父組件：
<div id="app">
<child-a ref="child"></child-a>
<button @click="getMyEvent">點擊父組件</button>
<div>
<script>
import ChildA from './child.vue'
export default{
components:{
ChildA
},
data(){
return {
msg:'我是父組件的數據'
}
},
methods:{
getMyEvent(){
//調用子組件的方法，child是上邊ref起的名字，emitEvent是子組件的方法。
this.$refs.child.emitEvent(this.msg)
}
}
}
</script>
子組件：
<template>
<button>點擊我</button>
</template>
<script>
export default{
methods:{
emitEvent(msg){
console.log('接收的數據------'+msg)
}
}
}
</script>
2.$emit的使用
子組件調用父組件的方法并傳遞數據。
子組件：
<template>
<button @click="emitEvent">點擊我</button>
</template>
<script>
export default{
data(){
return{
msg:'我是子組件的數據'
}
},
methods:{
emitEvent(){
//通過按鈕的點擊事件觸發方法，然后用$emit觸發一個my-event的自定義方法，傳遞this.msg數據。
this.$emit('my-event',this.msg)
}
}
}
</script>
父組件：
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
//父組件通過監測my-event事件執行一個方法，然后取到子組件中傳遞過來的值。
</div>
</template>
<script>
import childA from './child.vue';
export default {
components:{
childA
},
methods:{
getMyEvent(msg){
console.log('接收數據---'+msg);
//接收數據，我是子組件的數據
}
}
}
</script>
3.$on的使用場景
兄弟組件之間相互傳遞數據。
首先創建一個Vue的空白實例（兄弟組件的橋梁）
import Vue from 'vue'; export default new Vue();
子組件A:發送放使用$emit自定義事件把數據帶過去。
<template>
<div>
<span>A組件-{{msg}}</span>
<input type="button" value="把A組件數據傳遞給B" @click="send">
</div>
</template>
<script>
import eventBus from './eventBus';
export default{
data(){
return{
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send(){
eventBus.$emit('aevent',this.msg)
}
}
}
</script>
子組件B:接收方通過$on監聽自定義事件的callback接收數據
<template>
<div>
<span>B組件，A傳的數據為--{{msg}}</span>
</div>
</template>
<script>
import eventBus from './eventBus.vue'
export default {
data(){
return{
msg:''
}
},
mounted(){
eventBus.$on('aevent',(val)=>{//監聽事件aevent，回調函數要使用箭頭函數。
console.log(val);//打印結果；我是a組件的數據。
})
}
}
</script>
父組件：
<template>
<div>
<childa></childa>
<br/>
<childb></childb>
</div>
</template>
<script>
import childa from './childa.vue';
import childb from './childb.vue';
export default{
componets:{
childa,
childb
},
data(){
return{
msg:''
}
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
