Vue3 注册和

组件注册

一个 Vue 组件需要被“注册”，这样 Vue 知道在模板中遇到它时在哪里可以找到它的实现。有两种注册组件的方法：全局和本地。

全球注册

我们可以使用以下方法在当前的 Vue 应用程序中全局提供组件：app.component()

.js

import { createApp } from 'vue'const app = createApp({})app.component(  // the registered name  'MyComponent',  // the implementation  {    /* ... */  })

如果使用 SFC，您将注册导入的文件：.vue

.js

import MyComponent from './App.vue'app.component('MyComponent', MyComponent)

该方法可以链接：app.component()

.js

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

全局注册的组件可用于此应用程序内任何组件的模板：

模板

<!-- this will work in any component inside the app --><ComponentA/><ComponentB/><ComponentC/>

这甚至适用于所有子组件，这意味着所有这三个组件也将在彼此内部可用。

本地注册

虽然方便，但全局注册也有一些缺点：

1. 全局注册可防止构建系统删除未使用的组件（也称为“摇树”）。如果您全局注册了一个组件，但最终没有在应用中的任何位置使用它，则该组件仍将包含在最终捆绑包中。

2. 全局注册使大型应用程序中的依赖关系不那么明确。这使得很难从使用它的父组件中找到子组件的实现。这可能会影响长期可维护性，类似于使用过多的全局变量。

本地注册仅将已注册组件的可用性限定为当前组件。它使依赖关系更加明确，并且更加摇树友好。

使用以下选项完成本地注册：components

vue

<script>import ComponentA from './ComponentA.vue'export default {  components: {    ComponentA  }}</script><template>  <ComponentA /></template>

对于对象中的每个属性，键将是组件的注册名称，而值将包含组件的实现。上面的示例使用 ES2015 属性简写，等效于：components

.js

export default {  components: {    ComponentA: ComponentA  }  // ...}

请注意，本地注册的组件在后代组件中也不可用。在这种情况下，将仅对当前组件可用，而不对其任何子组件或后代组件可用。ComponentA

组件名称大小写

在整个指南中，我们在注册组件时使用 PascalCase 名称。这是因为：

1. PascalCase 名称是有效的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件变得更加容易。它还可以帮助 IDE 自动完成。

2. <PascalCase />更明显的是，这是一个 Vue 组件，而不是模板中的原生 HTML 元素。它还将 Vue 组件与自定义元素（Web 组件）区分开来。

这是使用 SFC 或字符串模板时推荐的样式。但是，正如 DOM 模板解析警告中所述，PascalCase 标签在 DOM 模板中不可用。

幸运的是，Vue 支持将烤肉串标签解析为使用 PascalCase 注册的组件。这意味着注册为的组件可以通过 和 在模板中引用。这允许我们使用相同的 JavaScript 组件注册代码，而不管模板来源如何。MyComponent<MyComponent><my-component>

发出和侦听事件#

组件可以使用内置方法直接在模板表达式（例如处理程序中）发出自定义事件：v-on$emit

模板

<!-- MyComponent --><button @click="$emit('someEvent')">click me</button>

该方法在组件实例上也可用，如：$emit()this.$emit()

.js

export default {  methods: {    submit() {      this.$emit('someEvent')    }  }}

然后，家长可以使用以下命令收听：v-on

模板

<MyComponent @some-event="callback" />

组件事件侦听器也支持该修饰符：.once

模板

<MyComponent @some-event.once="callback" />

与组件和道具一样，事件名称提供自动大小写转换。请注意，我们发出了一个 camelCase 事件，但可以使用父级中的烤肉串大小写侦听器来侦听它。与道具大小写一样，我们建议在模板中使用烤肉串大小写的事件侦听器。

提示

与本机 DOM 事件不同，组件发出的事件不会冒泡。只能侦听直接子组件发出的事件。如果需要在同级组件或深度嵌套组件之间进行通信，请使用外部事件总线或全局状态管理解决方案。

事件参数

有时，使用事件发出特定值很有用。例如，我们可能希望组件负责将文本放大多少。在这些情况下，我们可以传递额外的参数来提供此值：<BlogPost>$emit

模板

<button @click="$emit('increaseBy', 1)">  Increase by 1</button>

然后，当我们在父级中侦听事件时，我们可以使用内联箭头函数作为侦听器，这允许我们访问事件参数：

模板

<MyButton @increase-by="(n) => count += n" />

或者，如果事件处理程序是一个方法：

模板

<MyButton @increase-by="increaseCount" />

然后，该值将作为该方法的第一个参数传递：

.js

methods: {  increaseCount(n) {    this.count += n  }}

提示

在事件名称之后传递到 的所有额外参数都将转发给侦听器。例如，使用侦听器函数将接收三个参数。$emit()$emit('foo', 1, 2, 3)

声明发出的事件

组件可以使用发出选项：

.js

export default {  emits: ['inFocus', 'submit']}

该选项还支持对象语法，它允许我们对发出的事件的有效负载执行运行时验证：emits

.js

export default {  emits: {    submit(payload) {      // return `true` or `false` to indicate      // validation pass / fail    }  }}

另请参阅：键入组件发出

尽管是可选的，但建议定义所有发出的事件，以便更好地记录组件应如何工作。它还允许 Vue 从故障转移属性中排除已知的侦听器，避免由第三方代码手动调度的 DOM 事件引起的边缘情况。

提示

如果在选项中定义了本机事件（例如，），则侦听器现在将仅侦听组件发出的事件，不再响应本机事件。clickemitsclickclick

事件验证

与 prop 类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以验证该事件。

为了添加验证，为事件分配了一个函数，该函数接收传递给 this.$emit 的参数调用并返回一个布尔值，以指示事件是否有效。

.js

export default {  emits: {    // No validation    click: null,    // Validate submit event    submit: ({ email, password }) => {      if (email && password) {        return true      } else {        console.warn('Invalid submit event payload!')        return false      }    }  },  methods: {    submitForm(email, password) {      this.$emit('submit', { email, password })    }  }}

学习更多内容在

微信搜索白龙教程小程序。

小程序找内容合作人