Vue中子组件调用父组件的函数

Vue中子组件调用父组件的函数

Vue中父组件调用子组件的函数比较常见的。除了父组件调用子组件的函数，其实子组件也可以调用父组件的函数。

---

DEMO:

Father.js:
<template>
    <div>
        <div>
            <h1>FATHER</h1>
            <son></son>
        </div>  
    </div>
</template>

<script>
import son from './son'
export default {
    components:{
        son
    },
    data(){
        return{
            
        }
    },
    methods: {
        say(){//需要被子组件调用的父组件函数
            console.log("Father COMPONENT");
        },
    },
}
</script>

Son.js:
<template>
    <div>
        <h1>SON</h1>
        <input type="button" value="调用父组件函数" @click="useFaterFun">
    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    methods:{
        useFaterFun(){
            this.$parent.say();
        }
    },
}
</script>

效果图:

---

Tips:

Son.js:
this.$parent.say(这里可以存放向父组件传递的数据);

Father.js:
say(入参){//需要被子组件调用的父组件函数
   //这里可以使用 子组件 传过来的数据   
},