Vue的事件发射与监听

最新推荐文章于 2025-03-13 15:35:50 发布

Li-nice

最新推荐文章于 2025-03-13 15:35:50 发布

阅读量1k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/chengshuo_pretty/article/details/105550216

版权

本文探讨Vue中$emit()和$on()的使用，强调$emit()用于子组件触发事件，$on()用于父组件监听事件。通过实例解释了如何在子组件中定义不含具体实现的add方法作为事件载体，然后在父组件中通过v-on绑定自定义事件handleVal，并定义对应的candy方法来接收和处理传递的值。整个过程中，事件参数在父子组件间传递，实现数据交互。

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

$emit()是发射 $on()是监听

<div id='app'>
    <h1 v-html="des"></h1>
    <h3>{
   {
   count}}</h3>
</div>
<button onclick='add()'> add </button>
<button onclick='addOne()'> addOne </button>

    let vm = new Vue({
   
        el:'#app',
        data:{
   
            des:'监听发射自定义事件！！！',
            count:100
        },
        methods:{
   
        }
    })
    vm.$on('biu',function(...data){
       ...是rest函数，就是可以将emit中发送的所有数据都接收到，否则就得一个形参对应一个变量
        console.log( data )
    })