Vue父子组建之间的传值及父子组件之间相互调用属性或方法

Vue父子组建之间的传值：

一、父子组建之间的传值

1.1  父组件向子组件传值

　　父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。

　　1. 在父组件中引入子组件；

　　2. 并在components中注册子组件；

　　3. 通过属性向子组件中传值。

<template>
    <div>
        <!-- 使用子组件，通过属性向子组件传值，可以是任意值，方法，甚至是父组件对象this -->
        <child title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></child>
    </div>
</template>

<script>
    //1. 引入子组件
    import child from './child.vue'
    export default {
        data() {
            return {
                
            }
        },
        //2.在父组件的components中注册子组件
        components: {
            child
        },
        methods: {
            parentFun() {
                console.log("这是父组件的方法");
            }
        }
    }
</script>

<style>
</style>

　　4. 在子组件中国通过props属性接收父组件串过来的数据

<template>
    <div>
        <div>父组件通过字符串方式传过来的title --- {{title}}</div>
        <button @click="parentFun()">调用父组件的方法</button>
        <div>通过父组件传过来的父组件对象调用的父组件的属性msg --- {{parent.msg}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props: {
            /* 4. 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */
            title,
            parentFun,
            parent
        }
    }
    
</script>

<style>
</style>

注： 以上所写的步骤是方便自己的记忆，实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。

1.2 子组件向父组件传值

　　子组件向父组件传值是通过自定义事件的方式向父组件传值，为方便理解记忆，可按以下步骤：

　　1. 在子组件中通过子组件的$emit方法自定义事件向父组件传数据

<template>
    <div>
        <div>父组件通过字符串方式传过来的title --- {{title}}</div>
        <button @click="parentFun()">调用父组件的方法</button>
        <div>通过父组件传过来的父组件对象调用的父组件的属性msg --- {{parent.msg}}</div>
        
        <button @click="sendMsgToParent()">点击向父组件传值</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: '这是子组件的msg'
            }
        },
        props: {
            /* 4.通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收 */
            title,
            parentFun,
            parent
        },
        methods: {
            sendMsgToParent() {
                //1.子组件通过子定义事件child-msg的方式将msg传给父组件
                this.$emit('child-msg', this.msg)
            }
        }
    }
    
</script>

<style>
</style>

　　2. 父组件通过监听子组件自定义的事件获取子组件传的值

<template>
    <div>
        <!-- 使用子组件，通过属性向子组件传值 -->
        <!-- 2.父组件通过监听子组件自定义的@child-msg事件获取子组件传过来的数据 -->
        <child @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></child>
    </div>
</template>

<script>
    //1. 引入子组件
    import child from './child.vue'
    export default {
        data() {
            return {
                parentMsg: '这是父组件的msg'
            }
        },
        //2.在父组件的components中注册子组件
        components: {
            child
        },
        methods: {
            parentFun() {
                console.log("这是父组件的方法");
            },
            getChildMsg(msg) {
                console.log("这就是子组件传过来的msg" + msg)
            }
        }
    }
</script>

<style>
</style>

二、父子组件之间相互调用属性或方法　

2.1 父组件调用子组件的属性或方法

　　父组件在使用子组件时可以通过Vue的ref属性获取到子组件对象，从而调用子组件的属性或方法，如下：

父组件：

<template>
    <div>
        <!-- 1. 通过ref属性表示自组件 -->
        <v-child ref="vChild" @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></v-child>
        <button @click="useChildMsg"></button>
    </div>
</template>

<script>
    //1. 引入子组件
    import vChild from './v-child.vue'
    export default {
        data() {
            return {}
        },
        components: {
            vChild
        },
        methods: {
            useChildMsg() {
                //2.通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法
                let child = this.$refs.vChild

　　　　　　　　　　　console.log(child.msg); //调用子组件的属性
　　　　　　　　　　　child.showMsg() //调用子组件的方法

            }
        }
    }
</script>

<style>
</style>

子组件：

<template>
    <div>
        <div>这是v-child组件</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: '这是子组件的msg'
            }
        },
        methods: {
            showMsg() {
                alert("这是v-child组件")
            }
        }
    }
    
</script>

<style>
</style>

2.2 子组件调用父组件的属性或方法

　　子组件调用父组件的方法或属性可以直接通过子组件对象的$parent属性获取父组件对象，从而调用父组件的属性或方法。如下：

子组件：

<template>
    <div>
        <div>这是v-child组件</div>
        <button @click="getParentMsg"></button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: '这是子组件的msg'
            }
        },
        methods: {
            showMsg() {
                alert("这是v-child组件")
            },
            getParentMsg() {
                let parent = this.$parent;  //1.获取父组件对象
                console.log(parent.msg);    //2.调用父组件的属性
                parent.showMsg()            //3.调用父组件的方法
            }
        }
    }
    
</script>

<style>
</style>

父组件：

<template>
    <div>
        <!-- 1. 通过ref属性表示自组件 -->
        <v-child ref="vChild" @child-msg="getChildMsg" title="父组件传过来的title" :parent-fun="parentFun" :parent="this"></v-child>
        <button @click="useChildMsg"></button>
    </div>
</template>

<script>
    //1. 引入子组件
    import vChild from './v-child.vue'
    export default {
        data() {
            return {
                msg: '这是父组件的msg'
            }
        },
        components: {
            vChild
        },
        methods: {
            useChildMsg() {
                //2.通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法
                let child = this.$refs.vChild
                console.log(child.msg);   //调用子组件的属性
                child.showMsg()           //调用子组件的方法
            },
            showMsg() {
                alert('这是父组件的showMsg)
            }
        }
    }
</script>

<style>
</style>

三、总结

3.1 父子组件之间传值

• 父组件向子组件传值：通过属性传入，子组件通过props定义与传入属性相同的变量接收；
• 子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值；

3.2 主动调用子组件或主动调用父组件的属性或方法

• 父组件主动调用子组件的属性或方法：通过父组件的$refs.子组件的ref属性值 来获取子组件对象，从而调用子组件的属性或方法；
• 子组件主动调用父组件的属性或方法：通过子组件的$parent 获取父组件对象，从而调用父组件的属性或方法