首页 > 其他分享 >Vue3 子组件修改父组件传过来的值

Vue3 子组件修改父组件传过来的值

时间:2023-10-26 15:34:40浏览次数:33  
标签:num 传过来 修改 123 Vue3 组件 const

Vue3 子组件修改父组件传过来的值

1、在父组件中,找到引用的子组件,在引用中加入v-model

例如:子组件是demo,需要穿的值为num

这个有个温馨提示,(v-model +冒号+需要穿的值)这个v-model可以写多个

<demo v-model:num="num"></demo>

//例如 可以写多个  需要修改多个传入的值
<demo v-model:num="num" v-model:arr="arr"></demo>

2、在子组件中引用

注意:在vue3中 defineProps 需要引用一下 import { defineProps } from 'vue'

const prop=defineProps({
    num: {
        type: Number,
        default:0
    }
})

3、定义一个emit来修改这个值

defineEmits也需要引入一下,一定要加update,冒号后面就是传过来的值的那个字段

const emit= defineEmits(['update:num'])

4、使用方法

直接在你需要的事件里,比如:click修改

const click=()=>{

   emit('update:num',123) //123  代表是将num值修改为123

}

标签:num,传过来,修改,123,Vue3,组件,const
From: https://www.cnblogs.com/nuomibaibai/p/17789512.html

相关文章

  • BootstrapBlazor组件库,Clipboard剪切板服务
    BootstrapBlazor组件库,Clipboard剪切板服务组件介绍本Blazor组件依赖于BootstrapBlazor组件库。使用该组件之前需要先安装BootstrapBlazor组件库。可以通过nuget命令行安装dotnetaddpackageBootstrapBlazor--version7.x或者双击项目名称直接添加ItemGroup<ItemGroup......
  • 需要使用WinDbg工具来分析windows系统产生的dump文件,此工具属于Windows SDK的一个组件
    需要使用WinDbg工具来分析windows系统产生的dump文件,此工具属于WindowsSDK的一个组件,在微软官方网站可以下载(链接)。 使用WinDbg分析Windowsdump文件方法_windbg分析dump文件_谁能懂我2011的博客-CSDN博客......
  • vue3项目创建
    1.确保npm指令能够运行-官网下载nodejs Download|Node.js(nodejs.org) 安装完成后重启intellij2.终端输入npminstall-gcreate-vue3.终端输入create-vue新建vue项目根据需要设置功能,例:4.打开新建vue项目中的README,点击npminstall前的绿色箭头,在t......
  • 基于 ElementUi框架的 table组件制作的 报表功能
    <template><!--月周计划报表--><divclass="monthPlanForm"><el-table:data="tableData":span-method="spanMethod"style="width:100%"><el-table-columntype="index"widt......
  • vue3 vite 根据目录生成路由
    vite勾选vue-router搭建好项目后,routes部分示例代码为routes:[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',//routelevelcode-splitting......
  • Hadoop-大数据组件版本号查看
    1.操作系统cat /etc/redhat-release; 2.JDKjava-version 3.SCALAscala --version 4.MySQLmysql--version 5.Zookeeperps-ef|grep-E“zookeeper-.*.jar” 6.Hadoophadoopversion 7.Hivehive --version 8.Hbasehbaseversion 9.Sparkspark-subm......
  • Openstack组件介绍
    Openstack七大组件介绍,OpenStack是一套laas解决方案,OpenStack是一个开源的云计算管理平台,以Apache许可证为授权Horizon组件——Horizon为OpenStack服务的Web控制面板,可以管理实例、镜像、创建密钥对,对实例添加卷、操作Swift容器等。——Horizon具有如下一些特点:——实力管理:创建、......
  • 甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观
    dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。本文将为大家揭示DHTMLXGantt自定义的典型用例,包括自定义任务、网格的新外观等,来展示其功能的强大性!用例-新建项目外观、当前月份标记和可折叠网格D......
  • vue和element ui 滑块组件 重置验证滑块父组件ref调用子组件函数,子组件调用自己dom标
    css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。方式一:利用css3滤镜filter中的drop-shadow代码如下:<style>.icon{display:inline-block;width:180px;height:180px;bac......
  • 在 Windows 11 中,你可以使用 PowerShell 命令 Get-WindowsCapability 来查询 Windows
    在Windows11中,你可以使用PowerShell命令Get-WindowsCapability来查询Windows组件功能。这个命令可以列出当前安装的所有Windows组件功能,以及它们的状态。以下是使用Get-WindowsCapability命令查询Windows组件功能的步骤:打开PowerShell终端:可以通过在任务栏中搜......