之前的文章介绍了 vue 的组件化，本章我们来看一下 vue 中组件的原生事件。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>vue</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <child @click="handleFatherClick"></child>
  11.  </div>
  12.  <script>
  13.      Vue.component("child", {
  14.          template: `
  15.              <p>child</p>
  16.         `
  17.      });
  18.      var app = new Vue({
  19.          el: '#app',
  20.          methods: {
  21.              handleFatherClick() {
  22.                  console.log("father click")
  23.              }
  24.          }
  25.      })
  26.  </script>
  27.  </body>
  28.  </html>

如上图代码，我们在子组件 child 上绑定了一个 click 事件，并在父组件的 methods 中打印输出日志，结果在控制台并没有打印出我们想要的东西。这是由于现在的 click 事件是一个自定义的事件，并不是原生的 click 事件，这样的写法我们在父子组件间传值时使用过，如下代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>vue</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <child @click="handleFatherClick"></child>
  11.  </div>
  12.  <script>
  13.      Vue.component("child", {
  14.          methods: {
  15.              handleChildClick(){
  16.                  console.log("child click")
  17.              }
  18.          },
  19.          template: `
  20.              <p @click="handleChildClick">child</p>
  21.         `
  22.      });
  23.      var app = new Vue({
  24.          el: '#app',
  25.          methods: {
  26.              handleFatherClick(){
  27.                  console.log("father click")
  28.              }
  29.          }
  30.      })
  31.  </script>
  32.  </body>
  33.  </html>
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>vue</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <child @click="handleFatherClick"></child>
  11.  </div>
  12.  <script>
  13.      Vue.component("child", {
  14.          methods: {
  15.              handleChildClick() {
  16.                  console.log("child click");
  17.                  this.$emit('click');
  18.              }
  19.          },
  20.          template: `
  21.              <p @click="handleChildClick">child</p>
  22.         `
  23.      });
  24.      var app = new Vue({
  25.          el: '#app',
  26.          methods: {
  27.              handleFatherClick() {
  28.                  console.log("father click")
  29.              }
  30.          }
  31.      })
  32.  </script>
  33.  </body>
  34.  </html>

在父子组件传值的文章中我们是通过 $emit 触发一个自定义事件，然后通过该自定义事件绑定在父组件的 methods 属性的方法上来传值的。在上面的代码中我们在子组件的 p 标签上绑定了一个 click 事件，该事件为原生事件，我们通过该事件的 handleChildClick() 方法，并通过 $emit 向外触发了一个 click 的事件，在 <child> 标签中，我们再通过父组件方法中的 handleFatherClick() 方法来绑定此触发事件，这样就可以运行父组件的 handleFatherClick() 事件了，如下结果：

当我们点击页面上的 child 时，根据日志输出可以看出：先触发子组件的原生 click 事件，然后通过子组件自定义的 click 事件向外触发的方式触发了父组件的 click 事件。

但是如果这样写看起来十分麻烦，那我们可不可以不通过子组件的自定义事件来触发父组件的 click 原生事件呢，Vue 官方为我恩提供了 native 原生事件方法，如下：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>vue</title>
  6.      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.  </head>
  8.  <body>
  9.  <div id="app">
  10.      <child @click.native="handleFatherClick"></child>
  11.  </div>
  12.  <script>
  13.      Vue.component("child", {
  14.          template: `
  15.              <p>child</p>
  16.         `
  17.      });
  18.      var app = new Vue({
  19.          el: '#app',
  20.          methods: {
  21.              handleFatherClick() {
  22.                  console.log("father click")
  23.              }
  24.          }
  25.      })
  26.  </script>
  27.  </body>
  28.  </html>

我们不通过子组件向外触发事件，而是直接在 <child> 标签上的 click 方法上加了 .native 属性，它的意思是触发父组件原生的 click 事件，这样就能达到和上面一样的效果。如下：

Vue 进阶之路（十）的更多相关文章

  1. Vue 进阶之路（九）

    之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...

  2. Vue 进阶之路（八）

    之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...

  3. Vue 进阶之路（七）

    之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...

  4. Vue 进阶之路（六）

    上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...

  5. Vue 进阶之路（五）

    之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...

  6. Vue 进阶之路（四）

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...

  7. Vue 进阶之路（三）

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...

  8. Vue 进阶之路（二）

    之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...

  9. Vue 进阶之路（一）

    vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...

随机推荐

  1. Fragment 生命周期 全局变量的声明位置

    public class Fragment_shouye extends Fragment { private List<Zixun_shouye> datas; private TopV ...

  2. Spring框架之什么是IOC的功能？

    1. 什么是IOC的功能? * IoC -- Inverse of Control,控制反转,将对象的创建权反转给Spring!! * 使用IOC可以解决的程序耦合性高的问题!!  

  3. oracle查找特定表的引用

    select * from user_source t where upper(t.TEXT) like upper('%table1%') 第二种方法类似于eclipse中的file search ...

  4. POSIX systemV共享内存的区别

    POISX共享内存分为两种方式: 1.内存映射文件 特点:共享内存的改变能在文件中体现: 2.共享内存区对象 特点:共享内存的改变在文件上看不出来(实际上根本打不开该文件): 以上两者都是基于mmap ...

  5. Codeforces Recycling Bottles 模拟

    C. Recycling Bottles time limit per test: 2 seconds memory limit per test: 256 megabytes input: stan ...

  6. dumpbin 查看dll中的导出函数

    C:\Program Files (x86)\Microsoft Visual Studio 14.0>dumpbin -exports E:\20171110\Release\aa.dll h ...

  7. EnrichPipeline文档

    https://sourceforge.net/projects/enrichmentpipeline/

  8. 2018.09.16 codeforces1041C. Coffee Break（双端队列）

    传送门 真心sb题啊. 考场上最开始看成了一道写过的原题... 仔细想了一会发现看错了. 其实就是一个sb队列. 每次插入到队首去就行了. 代码: #include<bits/stdc++.h& ...

  9. Intelj IDEA的pom.xml显示错误can not reconnect

    从GitHub上边down下来的开源项目,报错莫名其妙,后来发现是跟本地hosts文件有关系 hosts文件加上 127.0.0.1 localhost 然后pom文件reload一下就

  10. Python全栈2期 备忘

    http://www.cnblogs.com/linhaifeng/ http://www.cnblogs.com/alex3714/ http://www.cnblogs.com/wupeiqi/ ...