<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基础扩展3---$on和$emit的使用
最新推荐文章于 2024-08-01 03:56:53 发布
本文深入探讨Vue.js中的事件系统,重点介绍组件间通信的关键方法——$on和$emit的使用。通过实例解析如何监听与触发自定义事件,提升组件交互的灵活性。
摘要由CSDN通过智能技术生成