Vue父子之間的值傳遞

周龍飛發表於2020-07-01
Vue

將通過兩個input框實現父子之間的值傳遞作為演示，效果圖

先註冊父子各一個元件，程式碼如下

 

 <div id="app">
        <parent></parent>
    </div>

    <template id="parent">
        <div>
            <input type="text" v-model="text" placeholder="parent">
            <son></son>
        </div>
    </template>
    <template id="son">
        <div>
            <input type="text" placeholder="son">
        </div>
    </template>
 new Vue({
        el: "#app",
        components: {
            parent: {
                template: '#parent',
                data() {
                    return {
                        text: ''
                    }
                },
                components: {
                    son: {
                        template: '#son'
                    }
                }
            }
        }
    })

 

 一、父傳子

再父元件通過屬性傳遞值

 <template id="parent">
        <div>
            <input type="text" v-model="text" placeholder="parent">
            <son :text="text"></son>//通過屬性值傳遞
        </div>
    </template>

子元件通過props屬性接受

 components: {
                    son: {
                        template: '#son',
                        props:['text'] //通過props屬性接受父傳遞過來的值
                    }
                }

這樣我們就可以使用父元件傳遞過來的值了

 <template id="son">
        <div>
            <input type="text" placeholder="son" :value="text">//使用父元素傳遞過來的值
        </div>
    </template>

看下現在的效果

父元件向子元件傳遞成功

二、子傳父

通過父元件自定義事件，然後子元件用$emit(event,aguments)呼叫

 <template id="parent">
        <div>
            <input type="text" v-model="text" placeholder="parent">
            <son :text="text" @ev="item"></son>//自定義事件
        </div>
    </template>


components: {
            parent: {
                template: '#parent',
                data() {
                    return {
                        text: ''
                    }
                },
                components: {
                    son: {
                        template: '#son',
                        props: ['text']
                    }
                },
                methods: {
                    item(v) { //自定義事件觸發的方法
                        this.text = v //使用子元件傳遞過來的值改變this.text資料
                    }
                }
            }
        }

再子元件觸發自定義事件

<template id="son">
        <div>
            <input type="text" placeholder="son" :value="text" @input="emit" ref="son">//觸發自定義事件
        </div>
    </template>



components: {
            parent: {
                template: '#parent',
                data() {
                    return {
                        text: ''
                    }
                },
                components: {
                    son: {
                        template: '#son',
                        props: ['text'], 
                        methods: {
                            emit() {
                                this.$emit('ev', this.$refs.son.value) //觸發自定義事件，並傳遞值
                            }
                        }
                    }
                },
                methods: {
                    item(v) {
                        this.text = v
                    }
                }
            }
        }

這樣就完成了子傳父，父傳子，效果也完成了

相關文章