vue的自定义主键

最新推荐文章于 2023-10-01 16:26:54 发布

liu1992452008

最新推荐文章于 2023-10-01 16:26:54 发布

阅读量2.1k

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/78604051

版权

vuejs 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了在 Vue 中如何实现自定义事件，通过 `@` 语法监听事件和 `this.$emit()` 触发事件。示例展示了如何在组件间传递数据，实现组件间的通信，展示了一个包含多个自定义按钮组件(`my-btn`)的页面，每个按钮点击都会触发 `total` 事件并更新全局计数器 `totalcount`。

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

自定义事件： on监听事件和emit触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<script type="text/javascript" src="vue1.0.25.js" ></script>
	</head>
	<body>
		
	
		<div id="app">
			<my-btn @total='allcounter()'></my-btn>
			<my-btn @total='allcounter()'></my-btn>
			<my-btn @total='allcounter()'></my-btn>
			<my-btn @total='allcounter()'></my-btn>
			<my-btn @total='allcounter()'></my-btn>
			<my-btn @total='allcounter()'></my-btn>
       <p>所有按钮一共点击了{{totalcount}}次</p>
		</div>
		<template id="my_btn">
			<button @click="total()"> 点击了{{counter}}次</button>
		</template>

	<script type="text/javascript">

          Vue.component(
          	'my-btn',{
          		template:'#my_btn',
          		data(){
          			return {counter:0}
          		},
          		methods:{
          			total(){
          				this.counter+=1;
          				//告诉外界调用了这个方法
          				this.$emit('total')
          			}
          			}
          		}
          
          )

			new Vue({
				el:'#app',
				data:{
					totalcount:0
				},
          			methods:{
          				allcounter(){
          					this.totalcount+=1
          				}
				
				}
    	
			})
			
		</script>
	</body>
</html>