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.非父子通信（未完）