Vue一个通用的组件传递点击事件的两种种简单方法
程序员文章站
2022-03-24 09:37:49
...
在封装好一个通用组件时,点击组件内的button,触发组件Button的点击事件(@click=”createTag”)需要通信,这是一种写法,当然会有更高级的写法,但是暂时先用这个,
第一种
通用组件
<template>
<button class="newTag" @click="$emit('click',$event)"> <slot /> </button>
</template>
<script lang='ts'>
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component
export default class Button extends Vue {
}
引用组件
<template>
<Button @click="createTag">新增标签</Button>
</template>
第二种
组件页不变,引用组件页加一个native,作用一样,只可意会,
引用组件页
<template>
<Button @click.native="createTag">新增标签</Button>
</template>