vue2.0 组件通信

组件通信： 　　　　子组件要想拿到父组件数据 props 　　　　子组件不允许直接给父级的数据, 赋值操作如果想更改，父组件每次穿一个对象给子组件， 　　　　对象之间引用。

　　　　例子：

　　　　　　<script>
        　　　　　　　　window.onload=function(){
            　　　　　　　　　　　　new Vue({
                　　　　　　　　　　　　　　el:'#box',
                　　　　　　　　　　　　　　data:{
                    　　　　　　　　　　　　　　　　giveData:{
                        　　　　　　　　　　　　　　　　　　　　a:'我是父组件数据'
                    　　　　　　　　　　　　　　　　　　}
                　　　　　　　　　　　　　　　　},
                　　　　　　　　　　　　　　components:{
                    　　　　　　　　　　　　　　　　'child-com':{
                        　　　　　　　　　　　　　　　　　　props:['msg'],
                        　　　　　　　　　　　　　　　　　　template:'#child',
                        　　　　　　　　　　　　　　　　　　methods:{
                            　　　　　　　　　　　　　　　　　　　　　　change(){
 
                                　　　　　　　　　　　　　　　　　　　　　　　　this.msg.a='被改了';
                            　　　　　　　　　　　　　　　　　　　　　　　　}
                        　　　　　　　　　　　　　　　　　　　　　　}　　
                    　　　　　　　　　　　　　　　　　　　　}
                　　　　　　　　　　　　　　　　　　}
            　　　　　　　　　　　　　　　　　});
        　　　　　　　　　　　　　　};
    　　　　　　</script>
　　　　　　<template id="child">
        　　　　　　　　　　<div>
            　　　　　　　　　　　　<span>我是子组件</span>
            　　　　　　　　　　　　<input type="button" value="按钮" @click="change">
            　　　　　　　　　　　　<strong>{{msg.a}}</strong>
        　　　　　　　　　　</div>
    　　　　　　</template>
    　　　　　　<div id="box">
        　　　　　　　　　　父级: ->{{giveData.a}}
        　　　　　　　　<br>
        　　　　　　　　<child-com :msg="giveData"></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" @click="send">
                　　　　　　　　　　　　　　　　　　</div>
            　　　　　　　　　　　　　　`,
            　　　　　　　　　　　　methods:{
                　　　　　　　　　　　　　　　　send(){
                    　　　　　　　　　　　　　　　　　　　　Event.$emit('b-msg',this.a);
                　　　　　　　　　　　　　　　　}
            　　　　　　　　　　　　},
            　　　　　　　　　　data(){
                　　　　　　　　　　　　return {
                    　　　　　　　　　　　　　　　　a:'我是b数据'
                　　　　　　　　　　　　　　}
            　　　　　　　　　　}
        　　　　　　　　};
        　　　　　　var C={
            　　　　　　　　template:`
                　　　　　　　　　　　　　　<div>
                    　　　　　　　　　　　　　　　　<h3>我是C组件</h3>
                    　　　　　　　　　　　　　　　　<span>接收过来的A的数据为: {{a}}</span>
                    　　　　　　　　　　　　　　　　<br>
                    　　　　　　　　　　　　　　　　<span>接收过来的B的数据为: {{b}}</span>
                　　　　　　　　　　　　　　</div>
            　　　　　　　　　　　　`,
            　　　　　　　　　　　　data(){
                　　　　　　　　　　　　　　return {
                    　　　　　　　　　　　　　　　　　　a:'',
                    　　　　　　　　　　　　　　　　　　b:''
                　　　　　　　　　　　　　　　　}
            　　　　　　　　　　　　　},
            　　　　　　　　　　mounted(){
                　　　　　　　　　　　　　　　　//var _this=this;
                　　　　　　　　　　　　　　　　//接收A组件的数据
                　　　　　　　　　　　　　　　　Event.$on('a-msg',function(a){
                    　　　　　　　　　　　　　　　　　　　　　　this.a=a;
                　　　　　　　　　　　　　　　　}.bind(this));
                　　　　　　　　　　　　　　　　//接收B组件的数据
                　　　　　　　　　　　　　　　　Event.$on('b-msg',function(a){
                    　　　　　　　　　　　　　　　　　　　　　　this.b=a;
                　　　　　　　　　　　　　　　　　　}.bind(this));
            　　　　　　　　　　　　　　　　}
        　　　　　　　　　　　　};

        　　　　　　　　window.onload=function(){
            　　　　　　　　　　　　　　new Vue({
                　　　　　　　　　　　　　　　　　　el:'#box',
                　　　　　　　　　　　　　　　　　　components:{
                    　　　　　　　　　　　　　　　　　　　　　　　　'com-a':A,
                    　　　　　　　　　　　　　　　　　　　　　　　　'com-b':B,
                    　　　　　　　　　　　　　　　　　　　　　　　　'com-c':C
                　　　　　　　　　　　　　　　　　　}
            　　　　　　　　　　　　　　});
        　　　　　　　　};
    　　　　</script>
<body>
    　　　<div id="box">
        　　　　　　<com-a></com-a>
        　　　　　　<com-b></com-b>
        　　　　　　<com-c></com-c>
    　　</div>
</body>