2018-09-18

组件是可复用的 Vue 实例
一、组件：可以拓展HTML元素，封装可重用的代码
组件分为全局组件和局部组件
通过prop向子组件传递数据

全局组件：

    <div id="itany">

       <my-component></my-component>

      </div>
    <script src="js/vue.js"></script>
    <script>
    //全局组件
           Vue.component('my-component',{
          template:`
                    <div>
                          <h1>这是我第一个组件</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>
局部组件：

    <div id="itany">

       <my-component></my-component>

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

        new Vue({
            el:"#itany",
            data:{
                msg:'hello vue'
            },
             // 局部组件
            components:{
                'my-component':{
                    template:`
                            <div>
                                <a href="#">去百度</a>
                                <a href="#">去百度</a>
                                <a href="#">去百度</a>
                                <a href="#">去百度</a>
                                <a href="#">去百度</a>
                            </div>
                        `
                }
            }
        })
    </script>