NO.08--VUE之自定义组件添加原生事件

Posted 最愁起名字

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NO.08--VUE之自定义组件添加原生事件相关的知识,希望对你有一定的参考价值。

前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧:

许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就会发现添加不上。比如我写了两个 button,一个点击让 div 变红,一个点击让 div 变蓝。

App.vue文件

<template>
  <div id="app">
    <button @click="changeRed">变红</button>
    <!-- 使用 Btn 组件  并添加原生事件 -->
    <Btn @click="changeBlue"></Btn>
    <div :class="box"></div>
  </div>
</template>

<script>
// 引入 Btn 这个组件
import Btn from ‘./assets/components/Btn.vue‘
export default {
  name: ‘app‘,
  data () {
    return {
      box: ‘yellow‘
    }
  },
  methods: {
    changeRed(){
      this.box = ‘red‘
    },
    changeBlue(){
      this.box = ‘blue‘
    }
  },
  // 组件 注册
  components: {
    Btn
  }
}
</script>

<style>
.yellow{
  width: 200px;
  height: 200px;
  background: #ff0;
}
.red{
  width: 200px;
  height: 200px;
  background: #f00;
}
.blue{
  width: 200px;
  height: 200px;
  background: #00f;
}
</style>

Btn.vue 文件

<template>
    <div class="btn">
        <button>变蓝</button>
    </div>
</template>

 

 
技术分享图片
点击变色.gif

会发现 Btn 的绑定事件无效。其实 vue 官方是有提供对应的方法的, 给组件绑定原生事件,就是在自定义组件 Btn 的原生事件后面加个 .native 后缀就好了。

 

App.vue文件

<template>
  <div id="app">
    <button @click="changeRed">变红</button>
    <!-- 使用 Btn 组件  并添加事件 -->
    <Btn @click.native="changeBlue"></Btn>
    <div :class="box"></div>
  </div>
</template>

效果:


 
技术分享图片
点击变色-1.gif


以上是关于NO.08--VUE之自定义组件添加原生事件的主要内容,如果未能解决你的问题,请参考以下文章

面向对象开发之自定义事件

给组件绑定原生事件

jQuery事件之自定义事件

微信小程序之自定义日历组件

使用 Swift 反应原生自定义 UI 组件:如何在事件中访问 reactTag

Vue之自定义按键及指令