上一篇: axios 如何全局注册
在用 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
来源: http://www.jianshu.com/p/132869f76c45