Vue script setup 子组件调用父组件方法

Vue版本 3.2.31
1、父组件模板中,引入子组件时,通过@xxx="aaaa"来绑定关系,@后面的xxx就是子组件要调用的,="aaaa",就是子组件调用时对应的父组件中哪个方法。
2、子组件先用defineEmits,来确定接收这个来至父组件的绑定关系。
3、然后随便调用吧。

//父组件
<template>
    <div class="parent">
        //1.定义绑定关系。
        <child @xxx="aaaa"></child>
    </div>
</template>

<script setup>
import child from "@/components/child.vue";
function aaaa(){
    console.log('子组件调用父组件成功了.');
}
</script>

//子组件
<template>
    <div class="child" @click="test">adfadf</div>
</template>

<script setup>
//2.绑定关系。
const emit = defineEmits(['xxx']);

function test(){
    //3.随便调用,要传参就在后面加","
    emit('xxx');
    //emit('xxx',args);
}

</script>
Posted in VUE

发表评论

您的电子邮箱地址不会被公开。