<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展3---$on和$emit的使用</title>
</head>
<body>
<!-- // 监听自定义事件
vm.$on('eventName',msg=>{
});
// 触发自定义事件
vm.$emit('eventName',param);
-->
<div id="app">
<demo-in @increment="parentIncre"></demo-in>
<demo-in @increment="parentIncre"></demo-in>
<demo-in @increment="parentIncre"></demo-in>
<div>{
{total}}</div>
</div>
<script>
// 1、演示、定义一个demoIn的组件，点击btn，调用incre方法时，触发increment事件,
// 这个时候同一vm.on()可以监听这个事件，并且在组件上定义@increnment也可以监听这个事件。
// 这个是父子通信的一个方式(事件上浮，数据下沉)
Vue.component('demoIn', {
template: '<button @click="incre">{
{count}}</button>',
da
本文深入探讨Vue.js中的事件系统，重点介绍组件间通信的关键方法——$on和$emit的使用。通过实例解析如何监听与触发自定义事件，提升组件交互的灵活性。
最低0.47元/天 解锁文章
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
