Vue.py

外观

本页目录

组件事件 ​

此章节假设你已经看过了组件基础。若你还不了解组件是什么，请先阅读该章节。

触发与监听事件 ​

父组件可以通过 v-on (缩写为 @) 来监听事件：

template
<MyComponent @some_event="callback"></MyComponent>

注意这里我们触发了一个以 snake_case 形式命名的事件，但在父组件中可以使用 snake_case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 snake_case 形式来编写监听器。

TIP

和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。

事件参数 ​

有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要 <BlogPost> 组件来管理文本会缩放得多大。在这个场景下，我们可以给 emits 提供一个额外的参数：

template
<Button @click="emits('increase_by', 1)" 
        label="Increase by 1"
></Button>

然后我们在父组件中监听事件，可以用一个组件方法来作为事件处理函数：

template
<MyButton @increase_by="increaseCount"></MyButton>

该方法也会接收到事件所传递的参数：

py
def increaseCount(n):
  count.value += n

==todo== ​

TIP

所有传入 emits() 的额外参数都会被直接传向监听器。举例来说，emits('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

声明触发的事件 ​

组件可以显式地通过 defineEmits()emits 选项来声明它要触发的事件, defineEmits() 会返回一个函数供我们在 <template> 和 <script lang='py'> 中使用：

在<script lang='py'>中的使用示例：

vue
<!-- Hello.vue -->
<template>
  <p>hello</p>
  <Button @click="submit">submit</Button>
</template>
<script lang='py'>
from vuepy import defineEmits

emit = defineEmits(['submit'])

def submit(ev):
    print(ev) # Button(description='submit', ...)
    emit('submit', 1, 2, 3)
</script>
vue
<!-- App.vue -->
<template>
  <Hello @submit="on_child_submit"></Hello>
</template>
<script lang='py'>
def on_child_submit(a, b, c):
    print(a, b, c) # 1 2 3
</script>

在<script src='xxx.py'>中的使用示例：

vue
<!-- Hello.vue -->
<template>
  <p>hello</p>
  <Button @click="submit">submit</Button>
</template>
<script src='hello.py'></script>
python
# hello.py
from vuepy import defineEmits

def setup(props, ctx, app):
    emit = defineEmits(['submit'])

    def submit(ev):
        print(ev) # Button(description='submit', ...)
        emit('submit', 1, 2, 3)

    return locals()
vue
<!-- App.vue -->
<template>
  <Hello @submit="on_child_submit"></Hello>
</template>
<script lang='py'>
def on_child_submit(a, b, c):
    print(a, b, c) # 1 2 3
</script>

defineEmits() 不能在子函数中使用。如上所示，它必须直接放置在 <script lang='py'> 的顶级作用域下。

WARNING

请注意，这是一个预留的语法，当前版本未实现。

如果你显式地使用了 setup 函数而不是 <script setup>，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上：

js
export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

与 setup() 上下文对象中的其他属性一样，emit 可以安全地被解构：

js
export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

这个 emits 选项和 defineEmits() 宏还支持对象语法。通过 TypeScript 为参数指定类型，它允许我们对触发事件的参数进行验证：

vue
<script setup lang="ts">
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // 通过返回值为 `true` 还是为 `false` 来判断
    // 验证是否通过
  }
})
</script>

如果你正在搭配 TypeScript 使用 <script setup>，也可以使用纯类型标注来声明触发的事件：

vue
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

TypeScript 用户请参考：如何为组件所抛出事件标注类型

尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。同时，事件声明能让 Vue.py 更好地将事件和透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。

TIP

如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。

事件校验 ​

WARNING

请注意，这是一个预留的语法，当前版本未实现。

和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 this.$emitemit 的内容，返回一个布尔值来表明事件是否合法。

vue
<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

在 GitHub 上编辑此页