Vue uses emit from child to parent

directly on the code

Subassembly

<template>
    <div @click="fun">
        子传父
    </div>
</template>
<script setup>
import {reactive} from 'vue';
const table = reactive({
msg:'我是子组件'
})
let emits = defineEmits(["clicks"]); //使用defineEmits来创建emit
const fun = ()=>{
    emits("clicks",table.msg);
    //第一个为刚才定义的事件名,第二个是要传给父组件的值
}

</script>

parent component

<template>
<test @clicks="ces" />//在页面上以单标签的方式使用
                      //这个事件要用刚才在子组件中自定义的事件,例如:clicks
</template>
<script setup>
import test from '../../components/Test/index.vue';
//引入子组件的路径
const ces = (v)=>{
console.log(v);
}
//这个时候打印即可获取到子组件的值
</script>

Guess you like

Origin blog.csdn.net/qq_63608386/article/details/131482059