Vue 在父(子)组件引用其子(父)组件方法和属性

 

by:授客 QQ：1033553122

 

开发环境

 

Win 10

element-ui  “2.8.2”

Vue 2.9.6

 

 

 

父组件代码

<template>

    <div>

        <button @click=”callChildMethod()”>父组件调用子组件方法</button>

        <button @click=”getChildAttribute()”>父组件获取子组件属性</button>

 

        <header-part ref=”headerChild”></header-part>

    </div>

</template>

 

<script>

import HeaderPart from “./HeaderPart”;

 

 

export default {

    components: {

        HeaderPart

    },

    data() {

        return {

            title: “父组件”

        };

    },

 

    methods: {

        callChildMethod() {

            console.log(“父组件中调用子组件printName方法”);

            this.$refs.headerChild.printName();

        },

        getChildAttribute() {

            console.log(

                “父组件获取子组件title属性值：” + this.$refs.headerChild.title

            );

        },

        printName() {

            console.log(“打印父组件title属性值：” + this.title);

        }

    },

    mounted() {

        this.$customUtils.headerMenu.initMenuComponent();

    }

};

</script>

 

子组件代码

<template>

    <div>

       

        <button @click=”callFatherMethod()”>子组件中调用父组件的方法</button>

        <button @click=”getFatherAttribute()”>子组件中获取父组件的属性</button>

    </div>

</template>

 

<script>

 

export default {

    data() {

        return {

            title: “子组件”

        };

    },

 

    methods: {

        callFatherMethod() {

            console.log(“子组件中调用父组件printName方法”)

            this.$parent.printName();

        },

        getFatherAttribute(){

            console.log(“子组件获取父组件title属性值：” +  this.$parent.title);

 

        },

        printName(){

            console.log(“打印子组件title属性值：” + this.title)

        }

    }

  

};

</script>

实验结果：

 

 

 

 

总结

父组件获取中引用子组件方法、属性

给子组件定义一个ref（假设名称为childRef），然后父组件中通过this.$refs.childRef获取子组件，进而引用子组件方法、属性，如下：

this.$refs.childRef.方法(参数列表) 

this.$refs.childRef.属性

 

 

子组件中获取父组件的方法、属性

在子组件里面通过this.$parent获取父组件，进而引用父组件的方法和属性，如下：

this.$parent.属性

this.$parent.方法