父元件 -> 子元件

通過props來進行通訊
父元件程式碼:

<Children
    :dataName = "dataContent"
/>
//dataName: 傳過去資料的名字
//dataContent: 傳過去的資料

子元件程式碼:

<script>
    export default {
        props:['dataName ']
    }
    console.log(this.dataName)//通過 "this.父元件傳過資料名" 來呼叫
</script>

子元件 -> 父元件

子元件程式碼:

this.$emit('dataName1',dataContnet1)
//通過this.$emit()來發送你想要傳送的資料
//dataName1: 傳過去資料的名字
//dataContent1: 傳過去的資料

父元件程式碼:

<Children
    @dataName1 = 'newFuncName'
/>
//dataName1: 傳過去資料的名字
//newFuncName: 接收的方法名

<script>
export default {
    methods: {
        newFuncName: function (data) {
            console.log(data)
            //data 就是你想要傳的資料
        }
    }
}
    
</script>
 

原文地址：https://segmentfault.com/a/1190000012783745