博客列表 >Vue一个通用的组件传递点击事件的两种种简单方法

Vue一个通用的组件传递点击事件的两种种简单方法

南瓜又个梦
南瓜又个梦原创
2021年10月05日 23:55:171411浏览

在封装好一个通用组件时,点击组件内的button,触发组件Button的点击事件(@click=”createTag”)需要通信,这是一种写法,当然会有更高级的写法,但是暂时先用这个,
第一种
通用组件

  1. <template>
  2. <button class="newTag" @click="$emit('click',$event)"> <slot /> </button>
  3. </template>
  4. <script lang='ts'>
  5. import Vue from 'vue';
  6. import {Component} from 'vue-property-decorator';
  7. @Component
  8. export default class Button extends Vue {
  9. }

引用组件

  1. <template>
  2. <Button @click="createTag">新增标签</Button>
  3. </template>

第二种

组件页不变,引用组件页加一个native,作用一样,只可意会,

引用组件页

  1. <template>
  2. <Button @click.native="createTag">新增标签</Button>
  3. </template>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议