Vue.py

外观

本页目录

组件注册 ​

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

一个 Vue.py 组件在使用前需要先被“注册”，这样 Vue.py 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

全局注册 ​

我们可以使用 Vue.py 应用实例的 .component() 方法，让组件在当前 Vue.py 应用中全局可用。

py
from vue import create_app, VueOptions

app = create_app({})

app.component(
  # 注册的名字
  'MyComponent',
  # 组件的实现
  VueOptions(**{
    # /* ... */
  })
)

如果使用单文件组件，你可以注册被导入的 .vue 文件：

py
from vuepy import import_sfc

MyComponent = import_sfc('./App.vue')

app.component('MyComponent', MyComponent)

.component() 方法可以被链式调用：

js
app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

全局注册的组件可以在此应用的任意组件的模板中使用：

template
<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA></ComponentA>
<ComponentB></ComponentB>
<ComponentC></ComponentC>

所有的子组件也可以使用全局注册的组件。

局部注册 ​

全局注册虽然很方便，但有以下几个问题：

  1. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确。

在使用 <script lang='py'> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

vue
<template>
  <ComponentA></ComponentA>
</template>

<script lang='py'>
from vuepy import import_sfc

ComponentA = import_sfc('./ComponentA.vue')
</script>

请注意：局部注册的组件在后代组件中不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。

组件名格式 ​

在整个指引中，我们都使用 PascalCase 作为组件名的注册格式，这是因为：

  1. PascalCase 是合法的 Python 标识符。这使得在 Python 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。

  2. <PascalCase></PascalCase> 在模板中更明显地表明了这是一个 Vue.py 组件，而不是原生 HTML 元素。同时也能够将 Vue.py 组件和自定义元素 (web components) 区分开来。

在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 内模板中是不可用的，详情参见 DOM 内模板解析注意事项。

为了方便，Vue.py 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 <MyComponent> 或 <my-component> 引用。这让我们能够使用同样的 Python 组件注册代码来配合不同来源的模板。

在 GitHub 上编辑此页