vue基础练习-自定义事件

最新推荐文章于 2022-07-14 10:09:46 发布

wz前端初学者

最新推荐文章于 2022-07-14 10:09:46 发布

阅读量216

点赞数

分类专栏： javascript小练习文章标签： vue 前端 javascript js

本文链接：https://blog.csdn.net/wz13759497175/article/details/79888209

版权

javascript小练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

效果图如下:

这里左右两个按钮都是组件，每次点击时组件内部触发click事件，使count值加1，同时触发外部事件，使sum值加

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
</head>
<body>
	<div id="app">
		<div>{{sum}}</div>
		<wang v-on:deliver="addSum"></wang>
		<wang v-on:deliver="addSum"></wang>
	</div>
	<script type="text/javascript">
		Vue.component("wang",{
			template:"<button v-on:click='add'>{{count}}</button>",
			// 这里data需要定义成函数后返回，如果采用字面量写法可能会造成变量污染
			data(){
				return {
					count:0
				}
			},
			methods:{
				add(){
					this.count++;
					// 组件内部触发点击事件时,同时通过$emit方法触发外部自定义事件deliver,这里子组件其实与外部完全解耦了,只是执行内部事件时，同时触发外部事件。
					this.$emit("deliver");
				}
			}
		});
		new Vue({
			el:"#app",
			data:{
				sum:0
			},
			methods:{
				addSum(){
					this.sum++;
				}
			}
		});
	</script>
</body>
</html>

wz前端初学者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础练习-自定义事件

效果图如下:这里左右两个按钮都是组件，每次点击时组件内部触发click事件，使count值加1，同时触发外部事件，使sum值加1&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....
复制链接

扫一扫