组件注册
一个 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/>
这甚至适用于所有子组件,这意味着所有这三个组件也将在彼此内部可用。
本地注册
虽然方便,但全局注册也有一些缺点:
全局注册可防止构建系统删除未使用的组件(也称为“摇树”)。如果您全局注册了一个组件,但最终没有在应用中的任何位置使用它,则该组件仍将包含在最终捆绑包中。
全局注册使大型应用程序中的依赖关系不那么明确。这使得很难从使用它的父组件中找到子组件的实现。这可能会影响长期可维护性,类似于使用过多的全局变量。
本地注册仅将已注册组件的可用性限定为当前组件。它使依赖关系更加明确,并且更加摇树友好。
使用以下选项完成本地注册: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 名称。这是因为:
PascalCase 名称是有效的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件变得更加容易。它还可以帮助 IDE 自动完成。
<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 }) } }}
学习更多内容在
微信搜索白龙教程小程序。
![](https://i-blog.csdnimg.cn/blog_migrate/08b96d0a8ecad9de995b9e4d2ab0b0d0.jpeg)
小程序找内容合作人