一、組件：可以拓展HTML元素雁刷，封裝可重用的代碼
組件分為全局組件和局部組件
通過prop向子組件傳遞數(shù)據(jù)

全局組件：
body部分：

  <div id="itany">

       <my-component></my-component>

  </div>

js部分：

 <script src="js/vue.js"></script> 

 <script> 
      //全局組件
                  Vue.component('my-component',{ 
                      template:`
                                  <div> <h1>這是我第一個(gè)組件</h1>
                                    <a href="#">去百度</a> 
                                    <a href="#">去百度</a> 
                                    <a href="#">去百度</a>
                                    <a href="#">去百度</a> 
                                     <a href="#">去百度</a>  
                                        <a href="#">去百度</a> 
                                    </div> ` 
                                   }) 
                   new Vue({ 
                          el:"#itany", 
                data:{ 
                     msg:'hello vue'
                      }
             }
         }) 
     </script>

二、全局組件和局部組件：

組件可以被嵌套
組件中的data屬性必須是一個(gè)函數(shù)
body部分：

 <div id="itany">
      <my-component></my-component>
</div>

js部分：

<script src="js/vue.js"></script>
<script>
  //組件一
   Vue.component("my-component",{
    template:`
        <div>
            <h1>{{msg}}</h1>
            <button @click="alt">點(diǎn)擊按鈕</button>
            <my-child></my-child>
        </div>
    `,
    data:function(){
        return{
            msg:'我是組件一中的內(nèi)容'
        }
    },
    methods:{
        alt:function(){
            alert(1111)
        }
    }
})

//組件二
Vue.component("my-child",{
    template:`
        <div>
            <p>我是組件二</p>
            <a href="#">去百度</a>
        </div>
    `
})
new Vue({
    el:"#itany",
})
</script>

效果圖：

組件.png

三、父給子傳值案例props['屬性名']

body部分：

 <div id="itany">
      <father></father>
  </div>

js部分：

  <script src="js/vue.js"></script>
   <script>
        Vue.component('father',{
         template:`
        <div>
            <h3>這是父元素</h3>
            <child v-bind:number='num'></child>
            <button @click="add">點(diǎn)擊加1</button>
        </div>
    `,
    data:function(){
        return{
            num:1
        }
    },
    methods:{
        add:function(){
            this.num++
        }
    }
    
})
//子組件
Vue.component('child',{
    props:['number'],
    template:`
        <div>
            <h5>這是子元素</h5>
            <a href="#">{{number}}</a>
        </div>
    `
})
new Vue({
    el:"#itany",
    data:{}
})

</script>
效果圖：