vue 父子元件通訊，如下圖

父元件通過 props 向下傳遞資料給子元件，子元件通過 events 給父元件傳送訊息

子元件的 props 選項能夠接收來自父元件資料，但由於 props 是單向繫結的，所以只能是父元件向子元件傳遞，不能子元件向父元件傳遞

子元件通過觸發事件來通知父元件改變資料

程式碼示例如下

首先定義父元件 parent-component.vue

<template>
    <div>
        <div>
            <label>父元件</label>
        </div>
 
        <div>
            <input type="text" v-model="message" placeholder="請輸入內容">
            <button class="size" @click="show">顯示</button>    
        </div>
    </div>
</template>
 
<script>
 
export default {
    data (){
        return {
            message: ''        
        }
    },
    methods: {
        show(){
            alert(this.message)
        }
    }
    
}
</script>
 
<style>
.size {
   width: 200px
}
</style>

　　其次定義子元件 child-component.vue

<template>
    <div>
        <div>
            <label>子元件</label>
        </div>
        <div>
             <span>來自父元件的訊息:{{msg}}</span>
        </div>
    </div>
</template>
 
<script>
export default {
    props: ['msg']
}
</script>

父元件向子元件傳遞資料

定義完成後，在父元件中引入子元件

<template>
    <div>
        <div>
            <label>父元件</label>
        </div>
 
        <div>
            <input type="text" v-model="message" placeholder="請輸入內容">
            <button class="size" @click="show">顯示</button>    
        </div>
        <ChildComponent :msg="message"></ChildComponent>
    </div>
</template>
 
<script>
import ChildComponent from './child-component'
export default {
    components:{
        ChildComponent
    },
    data (){
        return {
            message: ''        
        }
    },
    methods: {
        show(){
            alert(this.message)
        }
    }
    
}
</script>
 
<style>
.size {
   width: 200px
}
</style>
 

　　執行後效果如下圖，實現了父元件向子元件的單向資料傳遞

子元件向父元件傳遞資料

修改子元件程式碼如下

<template>
    <div>
        <div>
            <label>子元件</label>
        </div>
        <div>
             <span>來自父元件的訊息:{{msg}}</span>
 
             <br>
             <input type="text" v-model="text">
             <button @click="sendMessage">向父元件傳送訊息</button>
        </div>
    </div>
</template>
 
<script>
export default {
    props: ['msg'],
    data (){
        return {
            text: ''
        }
    },
    methods: {
        sendMessage(){
            this.$emit('receiveMessage', this.text)
        }
    }
}
</script>

　　修改父元件程式碼如下

<template>
    <div>
        <div>
            <label>父元件</label>
        </div>
 
        <div>
            <input type="text" v-model="message" placeholder="請輸入內容">
            <button class="size" @click="show">顯示</button>    
        </div>
        <ChildComponent :msg="message" @receiveMessage='receiveMessage'></ChildComponent>
    </div>
</template>
 
<script>
import ChildComponent from './child-component'
export default {
    components:{
        ChildComponent
    },
    data (){
        return {
            message: ''        
        }
    },
    methods: {
        show(){
            alert(this.message)
        },
        receiveMessage(message){
            console.log(message)
        }
    }   
}
</script>
 
<style>
.size {
   width: 200px
}
</style>
 

執行如下

輸入框輸入 999999，點選按鈕，控制檯打印出 999999，實現了子元件向父元件通訊

搜尋

複製