2018-05-23 （表严肃）笔记二

二、组件

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. 配置组件
   点赞的实现：

<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="耀武扬威"></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
        }
    });

• 在当前页面中点击某链接，进入到该链接的主页(思路)：

   <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 //默认值
                }
            },
        });
//    子组件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'
    });

自己敲几遍才懂，父组件是用于显示的，子组件是点击的。
当点击子组件，触发事件，绑定showbalance，在父组件的方法中定义；当点击之后，判断数据真假，默认是false；
（子的showbalance调用父级的，点击按钮触发onclick，click中监听的showbalance，参数直接进入父级）

4. 组件通信之任意及平行组件通信
   出错了两次，主要是用$emit和$on进行平行组件的 传值。

    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'
    });