JS，Vue2，组件，全局组件，局部组件，组件传值，组件props验证

大家好，欢迎来到IT知识分享网。

Vue.js组件

组件（Component）

模块化：是从代码逻辑的角度进行划分的；组件化：是从UI界面的角度进行划分的。

组件是Vue.js 最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。

几乎所有的应用界面都可以抽象成一个组件树

注册一个全局组件：

Vue.component(tagName, options) tagName 为组件名，options 为配置选项。

注册后，调用组件：

全局组件&局部组件

全局组件：所有VUE实例都能使用的组件。

局部组件：在实例选项中注册局部组件。

Prop：是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明。注：prop是单向绑定，当父组件的属性变化时，将传导给子组件，但是不会反过来传导。

Prop验证：组件可以为props指定验证要求，当 prop 验证失败的时候，(开发环境构建版本的) Vue将会产生一个控制台的警告。

相关其他内容：

JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定、JS，Vue2，事件处理，计算属性，监视属性，class与style绑定、JS，Vue2，data的写法对象式和函数式，el（element）的两种写法。

网页代码案例

代码案例1，全局组件：

index.html

 
   
    
    
    
    
   

     {{msg}} 
    
 
      
     
 
       
        
       
 
         
         
        
      
     
   
 
    
  

代码案例2，局部组件：

 
   
    
    
    
    
   

     {{msg}} 
    
 
      
     
 
       
        
       
 
         
         
        
      
     
   
 
    
  

代码案例3，props指定验证要求：

 
   
    
    
    
    
   
 
    n1==> 
    n2==> 
    n3==> 
     
     
   
 
    
    
    
  

VUE脚手架代码案例

创建项目：

安装VUE命令： npm install -g @vue/cli 查看版本： vue --version > @vue/cli 5.0.4 创建项目（脚手架） vue create demo01 选择： Default ([Vue 2] babel, eslint) 运行项目 cd demo01 npm run serve > http://localhost:8080/ 安装vue-router： npm install vue-router@3.5.2 --save 安装vuex： npm install vuex@3.4.0 --save 项目引入element-ui： npm install element-ui@2.15.6 --save > https://element.eleme.cn/#/zh-CN

components/Info.vue

App.vue

启动遇见的问题：

解决方案，vue.config.js 文件中加一行：lintOnSave: false