【vue】defineEmits 传值 子传父

先行知识

传值流程


App.vue

html 复制代码
<template>
  <Header @getWeb="emitsGetWeb" @userAdd="emitsUserAdd"/>
  <hr />
  <p>web.name: {{ web.name }}</p>
  <p>web.url: {{ web.url }}</p>
  <p>user: {{ user }}</p>
</template>

<script setup>
import { ref, reactive } from "vue";
import Header from "./components/Header.vue";

//响应式数据
const web = reactive({
  name: "1234567890",
  url: "https://www.1234567890.com",
});
let user = ref(0);

const emitsGetWeb = (data) => { 
  console.log(data);
  web.name = data.name;
  web.url = data.url;
}
const emitsUserAdd = (data) => {
  console.log(data);
  user.value += data;
  console.log(user.value);
}
</script>

<style lang="scss" scoped></style>

Header.vue

html 复制代码
<template>
    <h2>header</h2>
    <button @click="userAdd">添加用户</button>
</template>

<script setup>

const emits = defineEmits(['getWeb', "userAdd"])

emits("getWeb", { name: "Header Name" , url: "Header Url"})

const userAdd = () => {
    emits("userAdd",1)
}
</script>

<style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关推荐
驭风少年君1 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说2 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友3 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行3 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安3 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-3 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada3 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚4 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu4 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After4 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript