Vue3_组件传参问题

并不是任意两个组件之间都可以进行参数传递

父传子

子传父

兄弟传参(先子传父,再父传给另一个子)

现在要向父组件发送参数

Navigator.vueApp.vue发送参数

clike 复制代码
<script setup>

// 用于定义向父组件提交数据的事件以及正式的提交数据
import {defineEmits} from 'vue'

// 定义一个向父组件提交数据的事件   事件名称自定义
const emits = defineEmits(["sendMenu"])

// 定义提交数据的方法

function send(data){
    emits('sendMenu',data)
}

</script>
<template>
<div>
    <ul>
        <li @click="send('学院管理')">学院管理</li>
        <li @click="send('图书管理')">图书管理</li>
        <li @click="send('请假管理')">请假管理</li>
        <li @click="send('考试管理')">考试管理</li>
        <li @click="send('班级管理')">班级管理</li>
        <li @click="send('教师管理')">教师管理</li>
    </ul>
</div>

</template>

<style scoped>

</style>

父组件进行接收,并传给另一个子组件

另一个子组件接收


相关推荐
永远是我的最爱4 小时前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
从文处安4 小时前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
Zhencode4 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd4 小时前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup
天下代码客4 小时前
使用electronc框架调用dll动态链接库流程和避坑
前端·javascript·vue.js·electron·node.js
weixin199701080165 小时前
【性能提升300%】仿1688首页的Webpack优化全记录
前端·webpack·node.js
冰暮流星5 小时前
javascript之数组
java·前端·javascript
晚霞的不甘5 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架
weixin79893765432...5 小时前
Vue 渲染体系“三件套”(template 模板语法、h 函数和 JSX 语法)
vue.js·h函数·template 模板·jsx 语法
xkxnq6 小时前
第五阶段:Vue3核心深度深挖(第74天)(Vue3计算属性进阶)
前端·javascript·vue.js