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

二、组件

1. 全局及局部组件

    
    
    
    


    var Alert = {
        template: '弹弹',
        methods: {
            on_click: function () {
                alert("哈哈");
            }
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            alert:Alert
        }
    });

2. 配置组件
   点赞的实现：

    aa
    
        
    

    var Like = {
        template: '赞{{like_count}}',
//        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：

   
    var User = {
        template: '弹弹',
        props:['msg'],
        methods: {
           on_click: function () {
              alert(this.msg);
          },
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            user:User
        }
    });

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

   
    var User = {
        template:'@{{username}}',
        props:['username'],
        methods: {
        }
    };
    new Vue({
        el:'#seg1',
        components:{
            user:User
        }
    });

(2) 子父通信

//    父组件balance
        Vue.component('balance',{
            template:`
            

                
                     

                    您的余额是35
                    
            
            `,
            
            methods:{
                show_balance:function(data){
                    this.show=true;
                    console.log=('data:',data)
                }
            },
            data :function(){
                return{
                    show:false //默认值
                }
            },
        });
//    子组件show
        Vue.component('show',{
            template:'显示余额',
            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:`
        
我说:
        
        
        `,
        methods:{
            onchange:function(){
                Event.$emit('gaga_said_something',this.i_said);//error:没加this
            }//error:{{}}
        },
        data:function(){
            return{
                i_said:'',
            }
        }
    })
    Vue.component('a',{
        template:`
嘎嘎说:{{gaga_said}}
`,
        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'
    });