黑豹程序员-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>
相关推荐
剑亦未配妥22 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
前端君8 小时前
实现最大异步并发执行队列
javascript
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy11 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端11 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿11 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL11 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉11 小时前
Vue组件化开发介绍
前端·javascript·vue.js