一、$refs的使用場景
父元件調用子元件的方法,可以傳遞資料
注意:子元件标簽中的時間也不區分大小寫要用“-”隔開
父元件:
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref給子元件起個名字-->
<button @click="getMyEvent">點選父元件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父元件中的資料"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//調用子元件的方法,child是上邊ref起的名字,emitEvent是子元件的方法。
}
}
}
</script>
子元件:
<template>
<button>點選我</button>
</template>
<script>
export default {
methods: {
emitEvent(msg){
console.log('接收的資料--------->'+msg)//接收的資料--------->我是父元件中的資料
}
}
}
</script>
二、$emit的使用場景
子元件調用父元件的方法并傳遞資料
<template>
<button @click="emitEvent">點選我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子元件中的資料"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通過按鈕的點選事件觸發方法,然後用$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 './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){
console.log('接收的資料--------->'+msg)//接收的資料--------->我是子元件中的資料
}
}
}
</script>
三、$on的使用場景
兄弟元件之間互相傳遞資料
首先建立一個vue的空白執行個體(兄弟間的橋梁)
import Vue from 'vue'
export default new Vue()
子元件A childa
發送方使用 $emit 自定義事件把資料帶過去
<template>
<div>
<span>A元件->{{msg}}</span>
<input type="button" value="把a元件資料傳給b" @click ="send">
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}
</script>
子元件B childb
而接收方通過 $on監聽自定義事件的callback接收資料
<template>
<div>
<span>b元件,a傳的的資料為->{{msg}}</span>
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg:""
}
},
mounted(){
vmson.$on("aevent",(val)=>{//監聽事件aevent,回調函數要使用箭頭函數;
console.log(val);//列印結果:我是a元件的資料
this.msg = val;
})
}
}
</script>
<template>
<div>
<childa></childa>
<br />
<childb></childb>
</div>
</template>
<script>
import childa from './childa.vue';
import childb from './childb.vue';
export default {
components:{
childa,
childb
},
data(){
return {
msg:""
}
},
methods:{
}
}
</script>