[Part 8 ] Vue.js 的精随- 自订事件

前言

$emit 让我们可以发送出自订的事件，例如: 触发特定的事件(关闭 popup) 或是 子元件向外传递资料。

呼叫每一个 $emit 可以传入两个参数:

• 事件名称: 这个名称用在父元件作为监听用
• payload 物件: 想要传递的资料

使用 v-on 指令或是缩写 @ 来监听 DOM 被触发的事件。例如: v-on:click="methodName" 或 @click="methodName"

发送事件

有以下三种方式:

inline events

ex:

<template>
  <my-input @custom-change="logChange"/> <!-- 监听 custom-change 这个事件-->
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
  components: {
    MyInput
  },
  methods: {
    logChange (event) {
      console.log(event)
    }
  }
}
</script>

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='$emit("customChange", $event.target.value)' /* INLINE EMIT! */
        />
    </div>
</template>

Options API

使用 this.$emit !

ex:

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='customChange'
        />
    </div>
</template>

<script>
export default {
    methods: {
        customChange (event) {
            this.$emit("customChange", event.target.value)
        }
    }
}
</script>

Composition API

因为在元件建立前就会执行 setup，必须使用 setup 第二个参数来先取得 emit方法

两种方式:

• setup 传入 context 物件
• 解构 context 物件

<template>
    <div>
        <p> Wrapper for a text input </p>
        <input 
            type="text"
            placeholder="Custom input!"
            @change='customChange'
        />
    </div>
</template>

<script>
export default {
    setup (props, context) {
        const customChange = (event) => {
            context.emit("customChange", event.target.value)
        }
        return {
            customChange
        }
    }
}
</script>

<!-- OR -->

<script>
export default {
    setup (props, { emit }) {
        const customChange = (event) => {
            emit("customChange", event.target.value)
        }
        return {
            customChange
        }
    }
}
</script>

补充

命名

在 Vue3，事件名称会自动转换大小写，如果在子元件中使用camelCase，父元件会监听到kebab-case的事件
ex:

// 子元件 发出事件
this.$emit('myEvent')

<!-- 父元件 监听事件-->
<my-component @my-event="doSomething"></my-component>

v-model 修饰符 Modifiers

在处理事件时，很常使用 event.preventDefault() 或 event.stopPropagation() ，虽然可以把这些 DOM 事件相关的部分写入 methods中，但尽可能 methods 单纯的包含资料逻辑就好，所以可以使用 Vue 提供给 v-on 的事件修饰符。以点.表示的後缀。

• .stop 阻挡事件冒泡
• .prevent 阻挡预设行为
• .capture 以捕获形式触发事件
• .self 只触发元素自己的事件
• .once 指定事件只触发一次

ex:

<form v-on:submit.prevent="onSubmit">...</form>

.prevent修饰符告诉v-on这个directive 在触发事件时，要去呼叫 event.preventDefault()

<!-- click 事件只会被触发一次 --> 
<a @click.once="doThis"></a>

参考

A Guide to Vue $emit – How to Emit Custom Events in Vue

下篇预告

• Vue CLI

每日一句:
克服恐惧，好像才能变的勇敢