vue中$refs、$emit、$on、$offの使用詳細
1.$refsの使用シーン
親コンポーネントがサブコンポーネントを呼び出す方法は、データを転送することができます。
親コンポーネント:
サブコンポーネントは、親コンポーネントの方法を呼び出して、データを転送します。
サブコンポーネント:
兄弟構成要素の間でデータをやりとりする。
まず、Vueの空白事例(兄弟セットの橋)を作成します。
親コンポーネントがサブコンポーネントを呼び出す方法は、データを転送することができます。
親コンポーネント:
<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でカスタムイベントのcalbackを傍受してデータを受信する。
<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>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。