1酝惧，組件（component） 是vue最強(qiáng)大的功能之一，組件化開(kāi)發(fā)
2伯诬，vue組件可以擴(kuò)展html元素晚唇，封裝可重用的代碼
3，在組件中盗似，data是函數(shù)哩陕，并且有返回值
4，全局組件

<div id="app">
    <my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:`
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        `
    })
    new Vue({
        el:'#app'
    })

5赫舒，局部組件

<div id="app">
      <my-component></my-component>
<div>
      <h1>asdas</h1>
      <button>按鈕</button>
</div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        components:{
            template:`
                <div>
                    <h1>asdas</h1>
                    <button>按鈕</button>
                </div>
            `,
            data:function(){
                return{
                    msg:'12312'
                }
            },
            methods:{
                alt:function(){
                    alert(221341);
                }
            }
        }
    })
</script>

6悍及，組件之間的傳值
父?jìng)髯?----用屬性傳
子傳父-----用事件傳
同級(jí)之間傳值（兄弟關(guān)系）

(父?jìng)髯?

<div id='app'>
   <my-content></my-content>
</div>
<script src='js/vue.js'></script>
<script>
   Vue.component("my-content",{
       template:`
          <div>
             <h2>我是my-content組件的標(biāo)題</h2>
             <my-child v-bind:message='msg'></my-child>

         </div>
        `,
        data:function(){
            return{
                msg:'dgddbghfghfnh'
            }
        }
   }) 
   Vue.component("my-child",{
       props:['message'],
       template:`
          <div>
           <h3>我是my-child組件中的標(biāo)題</h3>
           <p>{{message}}</p>
          </div>
        `
   })
   new Vue({
      el:'#app'
   })
</script>

（子傳父）

<div id='app'>
       <my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
    Vue.component('my-father',{
        template:`
            <div>
               <h1>{{mess}}</h1>
               <my-child @send='revMsg'></my-child>
            </div>
         `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
           revMsg:function(txt){
               this.mess=txt
           }
         }
    })
    Vue.component('my-child',{
        template:`
             <button @click='sendFather'>給父組件</button>
         `,
        data:function(){
            return{
                msg:'-----------'
            }
        },
        methods:{
            sendFather:function(){
        //                   this.$emit('自定義事件',參數(shù)) 
                        this.$emit('send',this.msg)
            }
        }
    })
    new Vue({
        el:"#app"
    })
</script>