父组件中子组件上事件执行

问题描述:在父组件内给子组件上添加自定义事件,如图为click,并不能执行。
解决方法一:添加事件修饰符@click.native(此处不能自定义事件,只能用原生事件)

	<div id="app">
		<count  @click="putButton"></count>
		<!-- 解决方法一 -->
		<!-- <count  @click.native="putButton"></count> -->
	</div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		//注册count组件
		Vue.component("count", {
			template: "<div>'hello world'</div>",.......
		var app = new Vue({
			el: "#app",
			data: {},
			methods: {
				putButton: function() {
				alert("被点击了")
			}
		}

解决方法二:在子组件模板里定义事件,并发送事件,发送的名称,必须和@语法糖后面的自定义事件名称相同,用于监听

	<div id="app">
		<count  @click="putButton"></count>//@后面的名称必须和
	</div>
	........
	Vue.component("count", {
			template: "<div @click='change'>'hello world'</div>",
			data() {
				return { }
			},
			methods: {
				change: function(){
					this.$emit("click")
				}	
			}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43955911/article/details/88885449