vue组件通信

1.子组件如何快速改变父组件中传过来的值（通过引用传递的方式给子组件，子组件可以直接改变对象中的属性）

// App.vue
<template>
  <div>
    <News :a-msg="msg" :out-data="outData"></News>
    {{msg}}
    <h3>{{outData.a}}</h3>
  </div>
</template>

<script>
import News from ‘./components/News.vue‘
export default {
  data () {
    return {
      msg: ‘我是app组件中的内容‘,
      // 如果子组件想直接改变的值，可以传递一个对象到子组件中，因为这样的话，在组件中改变a，父组件也改变了，是因为js对象是引用传递
      outData:{
        a:"我是从组件app中给出的变量"
      }
    }
  },
  components:{
    News
  }
}
</script>

　在子组件中可以这样直接修改父组件传过来的对象

// News.vue
<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>{{aMsg}}</h2>
    <h3 @click="change">{{outData.a}}</h3>
  </div>
</template>
<script>
  export default {
    props:[‘aMsg‘,‘outData‘],
    data(){
      return {
        ‘msg‘: ‘我是news组件中的内容‘
      }
    },
    methods:{
      change(){
        this.outData.a = ‘我可以直接这样改变你哦‘
      }
    }

  }
</script>

2.如果想从父组件中接收过来的值能在子组件中可以被修改，需要一个额外的内部变量来进行接收，这样在可以直接在内部改变自己的值，从而间接达到改变

// News.vue
<template>
  <div>
    <h1 @click="change">{{getMsg}}</h1>
  </div>
</template>
<script>
  export default {
    props:[‘aMsg‘],
    data(){
      return {
        // 如果想从父组件中接收过来的值能在子组件中可以被修改，需要一个额外的内部变量来进行接收，这样在可以直接在内部改变自己的值，从而间接达到改变
        ‘getMsg‘:this.aMsg
      }
    },
    mounted(){
        //或者将值在这里面改变
    },
    methods:{
      change(){
        this.getMsg = "改变"
      }
    }
  }
</script>

3.单一事件管理组件通信(所有组件之间快速通信)

父组件中引入三个组件AA,BB,CC，然后这三个同级组件之间互相通信

// App.vue
<template>
  <div>
    <AA :event="event"></AA>
    <BB></BB>
    <CC :event="event"></CC>
  </div>
</template>

<script>
import Vue from ‘vue‘
var Event = new Vue();
import AA from ‘./components/A.vue‘
import BB from ‘./components/B.vue‘
import CC from ‘./components/C.vue‘
export default {
  data () {
    return {
      msg: ‘我是app组件中的内容‘,
      event:Event
    }
  },
  components:{
    AA,
    BB,
    CC
  }
}
</script>

　AA组件

<template>
    <div>
        <span>{{msg}}</span>
        <input type="button" value="将A组件值传给C组件" @click="send">
    </div>
</template>

<script>
    export default{
        props:[‘event‘],
        data(){
            return {
                msg:‘我是a组件中的值‘
            }
        },
        methods:{
            send(){
                this.event.$emit(‘a-msg‘,this.msg);
            }
        }
    }
</script>

BB组件

<template>
    <div>
        <span>{{msg}}</span>
        <input type="button" value="将B组件值传给C组件">
    </div>
</template>

<script>
    export default{
        data(){
            return {
                msg:‘我是b组件中的值‘
            }
        }
    }
</script>

CC组件接受AA,BB组件中的值

<template>
    <div>
        <h1>{{msg}}</h1>
        <h3>我是接受过来的数据msg:{{getmsg}}</h3>
    </div>

</template>

<script>
    export default{
        props:[‘event‘],
        data(){
            return {
                msg:‘我是c组件中的值‘,
                getmsg:‘默认值‘
            }
        },
        mounted(){
            var _this = this
            this.event.$on(‘a-msg‘,function(a){
                    _this.getmsg=a;
            });
        }
    }
</script>

这样就轻松完成多组件之间的值传递