【Vue】vue中父子组件主动传值

Vue中父子组件主动获取值和传值

父组件主动获取子组件的数据和执行子组件方法

调用子组件的时候定义一个ref

<v-child ref="child"></v-child>

父组件主动获取子组件数据

this.$refs.child.属性

父组件主动执行子组件方法

this.$refs.child.方法

父组件通过$refs主动获取子组件的数据和执行子组件方法

子组件Header.vue

<template>
    我是Header组件
</template>
<script>
    export default {
        name: "",
        data() {
            return {
                msg:"我是子组件的Msg",
            }
        },
        methods: {
            run(){
                console.log("我是子组件的Run");
            }
        }
    }
</script>

父组件Home.vue调用子组件

<template>
    <v-header ref="header"></v-header>
    <br>
    我是Home组件
    <br>
    <button @click="getChildMsg()">获取子组件的数据</button>
    <br>
    <button @click="getChildFn()">调用子组件的方法</button>
</template>
<script>
    import Header from "@/components/Header";
    export default {
        name: "",
        data() {
            return {
                msg:"我是父组件的Msg",
            }
        },
        components:{
            "v-header":Header,
        },
        methods: {
            getChildMsg(){
                // 获取子组件数据
                console.log(this.$refs.header.msg);
            },
            getChildFn(){
                // 执行子组件方法
                this.$refs.header.run();
            }
        }
    }
</script>

子组件主动获取父组件的数据和执行父组件方法

子组件主动获取父组件的数据

this.$parent.数据

子组件主动获取父组件的方法

this.$parent.方法

父组件Home.vue

<template>
    <v-header ref="header"></v-header>
    <br>
    我是Home组件
    <br>
    <button @click="getChildMsg()">获取子组件的数据</button>
    <br>
    <button @click="getChildFn()">调用子组件的方法</button>
</template>
<script>
    import Header from "@/components/Header";
    export default {
        name: "",
        data() {
            return {
                msg:"我是父组件的Msg",
            }
        },
        components:{
            "v-header":Header,
        },
        methods: {
            getChildMsg(){
                // 获取子组件数据
                console.log(this.$refs.header.msg);
            },
            getChildFn(){
                // 执行子组件方法
                this.$refs.header.run();
            },
            run(){
                console.log("我是父组件的Run方法");
            }
        }
    }
</script>

子组件Header.vue主动获取父组件的数据与方法

<template>
    我是Header组件
    <br>
    <button @click="getFatherMsg()">获取父组件的数据</button>
    <br>
    <button @click="getFatherFn()">获取父组件的方法</button>
</template>
<script>
    export default {
        name: "",
        data() {
            return {
                msg:"我是子组件的Msg",
            }
        },
        methods: {
            run(){
                console.log("我是子组件的Run");
            },
            getFatherMsg(){
                // 获取父组件数据
                console.log(this.$parent.msg);
            },
            getFatherFn(){
                // 获取父组件方法
                this.$parent.run();
            }
        }
    }
</script>