之前的文章介绍了 vue 的组件化, 本章我们来看一下 vue 中组件的原生事件.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child @click="handleFatherClick">
- </child>
- </div>
- <script>
- Vue.component("child", {
- template: ` < p > child < /p>
- `
- });
- var App = new Vue({
- el: '#app',
- methods: {
- handleFatherClick() {
- console.log("father click")
- }
- }
- })
- /
- </script>
- </body>
- </HTML>
如上图代码, 我们在子组件 child 上绑定了一个 click 事件, 并在父组件的 methods 中打印输出日志, 结果在控制台并没有打印出我们想要的东西. 这是由于现在的 click 事件是一个自定义的事件, 并不是原生的 click 事件, 这样的写法我们在父子组件间传值时使用过, 如下代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child @click="handleFatherClick">
- </child>
- </div>
- <script>
- Vue.component("child", {
- methods: {
- handleChildClick() {
- console.log("child click")
- }
- },
- template: ` < p@click = "handleChildClick" > child < /p>
- `
- });
- var App = new Vue({
- el: '#app',
- methods: {
- handleFatherClick(){
- console.log("father click")
- }
- }
- })
- /
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child @click="handleFatherClick">
- </child>
- </div>
- <script>
- Vue.component("child", {
- methods: {
- handleChildClick() {
- console.log("child click");
- this.$emit('click');
- }
- },
- template: ` < p@click = "handleChildClick" > child < /p>
- `
- });
- var App = new Vue({
- el: '#app',
- methods: {
- handleFatherClick() {
- console.log("father click")
- }
- }
- })
- /
- </script>
- </body>
- </HTML>
在父子组件传值的文章中我们是通过 $emit 触发一个自定义事件, 然后通过该自定义事件绑定在父组件的 methods 属性的方法上来传值的. 在上面的代码中我们在子组件的 p 标签上绑定了一个 click 事件, 该事件为原生事件, 我们通过该事件的 handleChildClick() 方法, 并通过 $emit 向外触发了一个 click 的事件, 在 <child> 标签中, 我们再通过父组件方法中的 handleFatherClick() 方法来绑定此触发事件, 这样就可以运行父组件的 handleFatherClick() 事件了, 如下结果:
当我们点击页面上的 child 时, 根据日志输出可以看出: 先触发子组件的原生 click 事件, 然后通过子组件自定义的 click 事件向外触发的方式触发了父组件的 click 事件.
但是如果这样写看起来十分麻烦, 那我们可不可以不通过子组件的自定义事件来触发父组件的 click 原生事件呢, Vue 官方为我恩提供了 native 原生事件方法, 如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child @click.native="handleFatherClick">
- </child>
- </div>
- <script>
- Vue.component("child", {
- template: ` < p > child < /p>
- `
- });
- var App = new Vue({
- el: '#app',
- methods: {
- handleFatherClick() {
- console.log("father click")
- }
- }
- })
- /
- </script>
- </body>
- </HTML>
我们不通过子组件向外触发事件, 而是直接在 <child> 标签上的 click 方法上加了 .native 属性, 它的意思是触发父组件原生的 click 事件, 这样就能达到和上面一样的效果. 如下:
来源: https://www.cnblogs.com/weijiutao/p/10682814.html