vue-自定义事件

最新推荐文章于 2025-06-05 11:38:15 发布

原创最新推荐文章于 2025-06-05 11:38:15 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文深入探讨了Vue中自定义事件的使用方法，包括事件触发、参数传递和事件模拟等核心概念。通过具体实例，展示了如何在Vue组件间传递数据，并分析了不同场景下事件处理的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-自定义事件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div id="counter-event-example">
	  <p>{{ total }}</p>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
</div>

<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>
</body>
</html>

2.运行效果

3.代码分析

4.代码分析2

5.补记：带着想法对问题的确认

5.1参数传递

5.1.1 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-�Զ����¼�</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div id="counter-event-example">
	  <p>{{ total }}</p>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler(2)">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function (a) {
      this.counter += 1;
	  this.counter += a;
      this.$emit('increment');
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1;
    }
  }
})
</script>
</body>
</html>

5.1.2运行效果

5.1.3代码分析

5.2 参数传递2

5.2.1代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-自定义事件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div id="counter-event-example">
	  <p>{{ total }}</p>
	  <button-counter v-on:increment="incrementTotal(5)"></button-counter>
	  <button-counter v-on:increment="incrementTotal(5)"></button-counter>
	</div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler(2)">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function (a) {
      this.counter += 1;
	  this.counter += a;
      this.$emit('increment');
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (a) {
      this.total += 1;
	  this.total += a;
    }
  }
})
</script>
</body>
</html>

5.2.2运行效果

5.2.3 代码分析

5.3 事件模拟

5.3.1 代码


class MyButton{
    fun;
    click(){
        this.fun(5);  
    }
}

class Event{
    message;
    a;
    fun;
}
class MyEventCenter{
    envents = new Array();
    emit(message){
        for(var i=0;i<this.envents.length;i++){
            if(message == this.envents[i].message){
                this.envents[i].fun(this.envents[i].a); 
            }
        }
    }
}
var myEventCenter = new MyEventCenter();
function incrementHandler(a){
    console.log("incrementHandler:"+a);
    myEventCenter.emit("increment");
}
function incrementTotal(a){
    console.log("incrementTotal:"+a);
}
var event = new Event();
event.message = "increment";
event.fun = incrementTotal;
event.a = 6;
myEventCenter.envents.push(event);

class Client{
    main(){
        console.log("hello world");
        var button_counter = new MyButton();
        button_counter.fun = incrementHandler;
        button_counter.click();
    }
}
var client = new Client();
client.main();

5.3.2 运行效果

5.3.3 代码分析