$once监听一个自定义事件。
$off移除自定义事件监听器。
只能监听自定义事件
推荐的清除定时器
直接在需要定时器的方法或者生命周期函数中声明并销毁,代码如下
export default{
methods:{
fun1(){
const timer = setInterval(()=>{
//需要做的事情
console.log(11111);
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
---------------------------------------------------------------------------------------------
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的空白实例（兄弟组件的桥梁）
子组件A:发送放使用$emit自定义事件把数据带过去。
<template>
<div>
<span>A组件-{{msg}}</span>
<input type="button" value="把A组件数据传递给B" @click="send">
</div>
</template>
<script>
export default{
data(){
return{
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send(){
this.$emit('aevent',this.msg)
}
}
}
</script>
子组件B:接收方通过$on监听自定义事件的callback接收数据
<template>
<div>
<span>B组件，A传的数据为--{{msg}}</span>
</div>
</template>
<script>
export default {
data(){
return{
msg:''
}
},
mounted(){
this.$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>
4.$once的使用场景
参数：
{string} event
{Function} callback
用法：
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
可以看一下
https://blog.csdn.net/weixin_42472040/article/details/108525976
// 修饰符
<a-button @click.once="test()" type="primary">保存</a-button>
$once, $off上面 里说的监听器 指的是 $on的监听器
5.$off的使用场景
参数：
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]
用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
// 选中返回数据
handleChange(value) {
this.$emit('change', value)
this.$emit('Ok', value)
this.$off('Ok', ()=> {
console.log(1111111111111);
})
this.$off('change)
// 不能有回调函数，第一个无效，因为 只移除这个回调的监听器
},
