组件、全局组件、局部组件、prop父子传值

一.组件的简单介绍

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

二. 全局组件、局部组件

例子：

QQ图片20180918143603.png

  html代码：

     

             
     

js 代码：

// 全局组件

   
    

// 局部组件

1、组件做的小案例
效果图：

0918145205.png

html代码：

              

                   
             

js 代码：

      
      
 
 
三 .prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
 
 
    例子：

        html：

                 

                     
                 
 
 
js：
 
 
     
    
 
 
 
 
 效果图： 
 
 
  
 
   
  
   
 
  
 
  

    80918150137.png 
  
 
 
 
 
小练习 水果列表：
 
 
 
 
 效果图： 
 
 
  
 
   
  
   
 
  
 
  

    8150652.png 
  
 
 
 
 
html 代码：
 
 
        

             
       
 
 
js代码：
 
 
       
      
 
 
简单的增加删除水果
 
 
效果图：
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    18151106.png 
  
 
 
 
 
html代码：
 
 
  

       
 
 
 
js代码：