1.父子通信

1.父组件（parent.vue）

<template>
    <div id="parentBig">
        <Child :dmsg="msg"></Child>
    </div>
</template>

<script>
import child from '@/components/child'

export default {
    data(){
        return {
            msg:'要传递的信息'
        }
    },
    components:{
        Child
    }
}
</script>

2. 子组件（child.vue）

<template>
    <div id="childBig">
        <h1>{{dmsg}}</h1>
    </div>
</template>

<script>

export default {
    props: ['dmsg'],// 使用props接收
    data(){
        return {
        }
    },
}
</script>

2.子父通信

1.子组件（child.vue）

<template>
    <div id="childBig">
        <button @click="click1">点击</button>
    </div>
</template>

<script>

export default {
    data(){
        return {
        }
    },
    methods:{
        click1(){
            // 添加自定义事件
            //参数1：自定义事件名(string形式) 参数2：需要传递的值
            this.$emit('Dream', 'aaa')
        }
    }
}
</script>

2.父组件（parent.vue）

<template>
    <div id="parentBig">
        <h1>{{title}}</h1>
        <child @Dream="fn"></child>
        <!-- @自定义事件名="调用的函数" -->
    </div>
</template>

<script>
import child from '@/components/child'

export default {
    data(){
        return {
            title:'文字ing'
        }
    },
    methods:{
        fn(res){
            console.log('接收自定义事件传的参数',res)
            this.title = '已更改为传来的参数：'+res
        }
    },
    components:{
        child
    }
}
</script>

3.非父子通信（未完）