目录

黑豹程序员-vue3 setup 子组件给父组件传值

工作原理

在子组件中调用emit方法触发父组件的方法实现传值

父组件 p.vue

bash 复制代码
<template>
  <div>
    <ChildComponent @childValue="handleChildValue"></ChildComponent>
    <button @click="getChildValue">获取子组件的值</button>
    {{receivedChildValue}}
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './child.vue';

const receivedChildValue = ref('');

const handleChildValue = (value) => {
  receivedChildValue.value = value;
};

const getChildValue = () => {
  console.log('Child Value:', receivedChildValue.value);
};
</script>

子组件:child.vue

bash 复制代码
<template>
  <div>
    <p>子组件的值: {{ childValue }}</p>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';

const childValue = ref('czs');
const instance = getCurrentInstance();

//子组件发生值给父组件,通过childValue事件触发
instance.emit('childValue', childValue.value);

</script>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
独立开阀者_FwtCoder8 分钟前
基于 MCP Http SSE模式的天气助手智能体开发实战(一文带你了解MCP两种开发模式)
前端·javascript·后端
前端大卫13 分钟前
超简单!3 步搭建免费个人 Blog!【附源码】
vue.js·vitepress·前端工程化
逆袭的小黄鸭21 分钟前
一文读懂 JavaScript 的各类继承方式
前端·javascript·面试
敲代码的玉米C25 分钟前
深入探讨 JavaScript 中的 setTimeout 精确性问题
前端·javascript
独立开阀者_FwtCoder26 分钟前
V4 版本发布!强势兼容 Vue、React!
前端·javascript·后端
远游客26 分钟前
菜鸟文章: js运行原理
javascript
申小兮28 分钟前
Vue Router
前端·vue.js·vue-router
Java陈序员30 分钟前
邻家小铺!一个基于 SpringBoot 和 Vue 的商城系统!
vue.js·spring boot·mysql
爱敲代码的小生35 分钟前
Es6--ECMAScript 新增语法
前端·javascript·vue.js
mxd018481 小时前
sojson。v5:新一代JavaScript代码保护工具的技术解析与应用场景
开发语言·javascript·ecmascript