欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-24 09:37:49
...

在封装好一个通用组件时,点击组件内的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>