Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件

在Vue中，通过v-on 来监听DOM事件，可以通过@简写代替。

一个简单的在组件中的事件调用示例

在template的Html中使用v-on或@监听一个click事件，并指定事件执行handleClick方法。
handleClick需要在组件的methods集合中定义。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <todo-list></todo-list>
    </div>

    <script>
      Vue.component("todo-list", {
        template: `
                <ul>
                    <todo-item  v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
                </ul>
            `,
        data: function() {
          return {
            list: [
              {
                title: "新课程1",
                del: false
              },
              {
                title: "新课程2",
                del: true
              },
              {
                title: "新课程3",
                del: false
              }
            ]
          };
        },
        methods:{
        }
      });
      Vue.component("todo-item", {
        props: {
          title: String,
          del: {
            type: Boolean,
            default: false
          }
        },
        template: `
              <li>
                  <span v-if="!del">{{title}}</span>
                  <span v-else style="text-decoration:line-through">{{title}}</span>
                  <button v-show="!del" @click="handleClick">删除</button>
              </li>`,
        data: function() {
          return {};
        },
        methods: {
            handleClick(){
                console.log("点击删除按钮！");
            }
        }
      });
      var vm = new Vue({
        el: "#app",
        data: {
        }
      });
    </script>
  </body>
</html>

效果如下

组件的事件调用如何触发上级节点的事件？通过$emit来触发。

this.$emit('自定义事件名',参数);//参数如有多个，可以用逗号隔开继续增加，如this.$emit('自定义事件名',参数1,参数2)

示例：组件todo-item上的事件，继续触发父组件todo-list上的自定义事件。

在事件方法handleClick中通过$emit继续触发父组件自定义事件。并传入参数title

this.$emit('delete',this.title);

在父组件todo-list的template中的html中监听自定义事件@delete="handleDelete"或v-on:delete="handleDelete"
在父组件件todo-list的methods定义handleDelete方法(带参数)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <todo-list></todo-list>
    </div>

    <script>
      Vue.component("todo-list", {
        template: `
                <ul>
                    <todo-item @delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
                </ul>
            `,
        data: function() {
          return {
            list: [
              {
                title: "新课程1",
                del: false
              },
              {
                title: "新课程2",
                del: true
              },
              {
                title: "新课程3",
                del: false
              }
            ]
          };
        },
        methods:{
            handleDelete(vtitle){
                console.log("删除工程！",vtitle)
            }
        }
      });
      Vue.component("todo-item", {
        props: {
          title: String,
          del: {
            type: Boolean,
            default: false
          }
        },
        template: `
              <li>
                  <span v-if="!del">{{title}}</span>
                  <span v-else style="text-decoration:line-through">{{title}}</span>
                  <button v-show="!del" @click="handleClick">删除</button>
              </li>`,
        data: function() {
          return {};
        },
        methods: {
            handleClick(){
                console.log("点击删除按钮！");
                this.$emit('delete',this.title);
            }
        }
      });
      var vm = new Vue({
        el: "#app",
        data: {
        }
      });
    </script>
  </body>
</html>

Vue事件还提供了大量的事件修饰符

.stop
.prevent
....

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

Vue事件还提供大量的按键修饰符
如常用的回车提交

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件

猜你喜欢