vue使用emit子传父

简介: vue使用emit子传父

直接上代码

子组件

<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>

父组件

<template>
<test @clicks="ces" />//在页面上以单标签的方式使用
                      //这个事件要用刚才在子组件中自定义的事件,例如:clicks
</template>
<script setup>
import test from '../../components/Test/index.vue';
//引入子组件的路径
const ces = (v)=>{
console.log(v);
}
//这个时候打印即可获取到子组件的值
</script>
相关文章
|
23小时前
|
JavaScript 前端开发 API
|
23小时前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
2天前
|
JavaScript 前端开发
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
|
18小时前
|
JavaScript
|
18小时前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
18小时前
|
JavaScript
|
19小时前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
19小时前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
|
23小时前
|
JavaScript
|
23小时前
|
JavaScript 前端开发