Vue进阶教程

最新推荐文章于 2024-09-24 18:36:20 发布

Lainnnnnnnnnnnn

最新推荐文章于 2024-09-24 18:36:20 发布

阅读量396

点赞数

分类专栏：前端WEB学习前端 JavaScript 文章标签： vue javascript js 前端 html

本文链接：https://blog.csdn.net/qq_36272264/article/details/108792986

版权

本文详细介绍了Vue组件的注册方式，包括全局注册和局部注册，并探讨了基础组件的自动化全局注册。此外，还讨论了Prop的使用，如HTML特性的大小写规则，传入布尔值和对象属性的方法。文章强调了单向数据流的原则，同时讲解了如何处理非prop特性，以及替换、合并已有特性和禁用特性继承的情况。

摘要由CSDN通过智能技术生成

深入了解组件

组件注册

全局注册

Vue.component('my-component-name', {
   })

局部注册
如果所有的组件都用全局注册意味着即使你已经不再使用一个组件，它仍然会被包含在全局环境中，这就造成javascript无谓的增加。

如果感兴趣可以加入我的前端学习交流群：1145459155

基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到，如果我们在很多组件中都用到，那么就都需要引入，会比较麻烦，这时候我们可以使用require.context只全局注册这些非常通用的基础组件，不需要在每个需要引入的组件中引入，可以直接写。在main.js中写：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
   
  // 获取组件配置
  const componentConfig =