简单的通信

1.父->子

父<template>

<div>

 '我是父组件，我显示的内容是'{{mes}}

 <Cc :from-p='mes'></Cc>

</div>

</template>

<script>

import Cc from './Cc.vue'

export default {

 data(){

   return {

     mes:'我是父组件的内容'

   }

 },

 components:{

   Cc

 }

}

</script>

子<template>

<div>

'我是子组件，我显示的内容是'{{mes}}

</div>

</template>

<script>

export default {

      props:['fromP'],

      data(){

           return{

                 mes:this.fromP

           }

      }

}

</script>

2. 子->父

父<template>

   <div>

        '我是父组件，我显示的内容是'{{mes}}

        <Cc @fromCc='chan'></Cc>

   </div>

</template>

<script>

import Cc from './Cc.vue'

export default {

   data() {

            return {

                mes: ''

            }

        },

        methods: {

            chan(da) {

                this.mes = da;

            }

        },

        components: {

            Cc

        }

}

</script>

子<template>

   <div>

        '我是子组件，我显示的内容是'{{mes}}

        <button @click='toP'>虽然不允许，但是我想传给父组件</button>

   </div>

</template>

<script>

export default {

   data() {

        return {

            mes: '我是子组件的内容'

        }

   },

   methods:{

        toP(){

             this.$emit('fromCc',this.mes)

        }

   }

}

</script>

3.平级传递vuex哈哈