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

欢迎大家来到IT世界,在知识的湖畔探索吧!

Vue.js组件

组件（Component）

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

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

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

注册一个全局组件：

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

注册后，调用组件：

欢迎大家来到IT世界,在知识的湖畔探索吧! 
   

全局组件&局部组件

全局组件：所有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，局部组件：

欢迎大家来到IT世界,在知识的湖畔探索吧! 
    
     
     
     
     
    

      {{msg}} 
     
 
       
      
 
        
         
        
 
          
          
         
       
      
    
 
     
   

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

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

VUE脚手架代码案例

创建项目：

欢迎大家来到IT世界,在知识的湖畔探索吧!安装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

欢迎大家来到IT世界,在知识的湖畔探索吧! 
     

启动遇见的问题：

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