VUE实例事件

最新推荐文章于 2021-08-10 13:09:04 发布

AyayaOVO

最新推荐文章于 2021-08-10 13:09:04 发布

阅读量190

点赞数 1

分类专栏： vue全家桶文章标签： vue

本文链接：https://blog.csdn.net/AyayaOVO/article/details/106936155

版权

vue全家桶专栏收录该内容

28 篇文章 0 订阅

订阅专栏

vue有实例属性，实例方法，实例事件，前两个跟选项类似，不是很常用。

1、$on（在构造器外部添加事件）

$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.count--;
});

2、$once（执行一次的事件）

app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.count--;
});

3、$off（关闭事件）

function off(){
    console.log('关闭事件');
    app.$off('reduce');
}

4、$emit（事件调用）

function reduce() {
    // 事件调用
    console.log('emit事件调用');
    app.$emit('reduce');
}

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>数字：{{count}}</div>
        <button onclick="reduce()">on调用</button>
        <button onclick="reduceOnce()">once调用</button>
        <button onclick="off()">off调用</button>
    </div>

<script type="text/javascript">
var app = new Vue({
    el:'#app',
    data:{
        count: 1
    }
})
// $on 在构造器外部添加事件
app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.count--;
});
// 调用
function reduce() {
    // 事件调用
    console.log('emit事件调用');
    app.$emit('reduce');
}

// $once执行一次的事件
app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.count--;
});
// 调用
function reduceOnce() {
    app.$emit('reduceOnce');
}

// 关闭事件
function off(){
    console.log('关闭事件');
    app.$off('reduce');
}
</script>
</body>
</html>

AyayaOVO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE实例事件

vue有实例属性，实例方法，实例事件，前两个跟选项类似，不是很常用。1、$on（在构造器外部添加事件）$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法app.$on('reduce',function(){ console.log('执行了reduce()'); this.count--;});2、$once（执行一次的事件）app.$once('reduceOnce',function(){ console.log('只执行一次的方法');
复制链接

扫一扫

专栏目录