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
                    }
                }
            }
        }

这样就完成了子传父，父传子，效果也完成了