二、組件

1. 全局及局部組件

<div id="seg1">
    <alert></alert>
    <alert></alert>
    <alert></alert>
    <alert></alert>
</div>

    var Alert = {
        template: '<button @click="on_click">彈彈</button>',
        methods: {
            on_click: function () {
                alert("哈哈");
            }
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            alert:Alert
        }
    });

2. 配置組件
   點(diǎn)贊的實現(xiàn)：

<div id="seg1">
    <like>aa</like>
    <!--//第二種方法：
    <template id='tem'>-->
        <!--<button :class="{liked:liked}" @click="toggle_like()">贊{{like_count}}</button>-->
    <!--</template>-->
</div>
    var Like = {
        template: '<button :class="{liked:liked}" @click="toggle_like()">贊{{like_count}}</button>',
//        template:'tem',
        data:function(){
            return {
                like_count:5,
                liked:false
            }
        },
        methods: {
            toggle_like: function () {
                if(!this.liked){
                    this.like_count++;
                }
                else {
                    this.like_count--;
                }
                this.liked = !this.liked;
            }
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            like:Like
        }
    });

3. 組件通信之父子通信
   (1) 父子通信

• props：

   <alert msg="耀武揚(yáng)威"></alert>
    var User = {
        template: '<button @click="on_click">彈彈</button>',
        props:['msg'],
        methods: {
           on_click: function () {
              alert(this.msg);
          },
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            user:User
        }
    });

• 在當(dāng)前頁面中點(diǎn)擊某鏈接，進(jìn)入到該鏈接的主頁(思路)：

   <user username="whh"></user>
    var User = {
        template:'<a :href="\'/user/\' +username">@{{username}}</a>',
        props:['username'],
        methods: {
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            user:User
        }
    });

(2) 子父通信

//    父組件balance
        Vue.component('balance',{
            template:`
            <div>
                <show @show-balance="show_balance"></show>
                     <div v-if="show">
                    您的余額是35
                    </div>
            </div>
            `,
            
            methods:{
                show_balance:function(data){
                    this.show=true;
                    console.log=('data:',data)
                }
            },
            data :function(){
                return{
                    show:false //默認(rèn)值
                }
            },
        });
//    子組件show
        Vue.component('show',{
            template:'<button @click="on_click()">顯示余額</button>',
            methods:{
                on_click() {
                    this.$emit('show-balance',{a:1,b:2})
                    }   
            }
        });
    new Vue({
        el:'#seg1'
    });

自己敲幾遍才懂，父組件是用于顯示的，子組件是點(diǎn)擊的。
當(dāng)點(diǎn)擊子組件，觸發(fā)事件，綁定showbalance，在父組件的方法中定義；當(dāng)點(diǎn)擊之后，判斷數(shù)據(jù)真假，默認(rèn)是false；
（子的showbalance調(diào)用父級的，點(diǎn)擊按鈕觸發(fā)onclick，click中監(jiān)聽的showbalance，參數(shù)直接進(jìn)入父級）

4. 組件通信之任意及平行組件通信
   出錯了兩次，主要是用$emit和$on進(jìn)行平行組件的 傳值。

    var Event = new Vue();
    Vue.component('gaga',{
        template:`
        <div>我說:
        <input @keyup="onchange" v-model="i_said"/>
        </div>
        `,
        methods:{
            onchange:function(){
                Event.$emit('gaga_said_something',this.i_said);//error:沒加this
            }//error:{{}}
        },
        data:function(){
            return{
                i_said:'',
            }
        }
    })
    Vue.component('a',{
        template:`<div>嘎嘎說:{{gaga_said}}</div>`,
        data:function(){
            return{
                gaga_said:'',
            }
        },
        mounted:function(){
            var that = this;
            Event.$on('gaga_said_something',function(data){
                that.gaga_said = data;
            })
        }
    })
    new Vue({
        el:'#seg1'
    });