深入学习之vue传递值

js的事件绑定方法中，ie只支持attachEvent,而FF和Chrome只支持addEventListener，所以就必须为这两个

vue 1.0 同步父子组件之间的数据:msg.sync="a"(2.0失效了） 并使用props 父传递到子 

<script>

        window.οnlοad=function(){

            new Vue({

                el:'#box',

                data:{

                    a:'我是父组件数据'

                },

                components:{

                    'child-com':{

                        props:['msg'],

                        template:'#child',

                        mounted(){

                            this.b=this.msg;

//写在mounted中进行中转的话 不会报错 但是依然不能同步数据

                        },

                        methods:{

                            change(){

                                this.msg='被更改了'

                            }

                        }

                    }

                }

            });

        };

    </script>

<template id="child">

        <div>

            <span>我是子组件</span>

            <input type="button" value="按钮" @click="change">

            <strong>{{msg}}</strong>

        </div>

    </template>

    <div id="box">

        父级: ->{{a}}

        <br>

        <child-com :msg.sync="a"></child-com>

    </div>

//

<script>

        //准备一个空的实例对象

        var Event=new Vue();

        var A={

            template:`

                <div>

                    <span>我是A组件</span> -> {{a}}

                    <input type="button" value="把A数据给C" @click="send">

                </div>

            `,

            methods:{

                send(){

                    Event.$emit('a-msg',this.a);

                }

            },

            data(){

                return {

                    a:'我是a数据'

                }

            }

        };

        var B={

            template:`

                <div>

                    <span>我是B组件</span> -> {{a}}

                    <input type="button" value="把B数据给C">

                </div>

            `,

            data(){

                return {

                    a:'我是b数据'

                }

            }

        };

        var C={

            template:`

                <div>

                    <h3>我是C组件</h3>

                    <span>接收过来的A的数据为: {{a}}</span>

                </div>

            `,

            data(){

                return {

                    a:'',

                    b:''

                }

            },

            mounted(){

                //var _this=this;

                Event.$on('a-msg',function(a){

                    this.a=a;

                }.bind(this));

            }

        };

        window.οnlοad=function(){

            new Vue({

                el:'#box',

                components:{

                    'com-a':A,

                    'com-b':B,

                    'com-c':C

                }

            });

        };

    </script>

  <div id="box">

        <com-a></com-a>

        <com-b></com-b>

        <com-c></com-c>

    </div>