首页 > 其他分享 >vue3 父组件传值给子组件 子组件修改后回传给父组件

vue3 父组件传值给子组件 子组件修改后回传给父组件

时间:2023-11-15 16:45:02浏览次数:35  
标签:goods const props sn vue3 组件 给子

父组件

<jdy-goods-attr v-model:goods_sn="goods.goods_sn"></jdy-goods-attr>
//尤总 在vue3的时候给我们提供了一个新的思路:v-model来实现父传子,并且子也可以修改父组件传递过来的数据。

子组件

const props = defineProps({
  goods_sn: {
    type: String,
    default: ''
  }
})
const goods_sn = toRef(props, 'goods_sn');
const sn = ref('');
//监听goods_sn的变化
watch(goods_sn, function (newValue, oldValue) {
  sn.value = props.goods_sn;
})

const emit = defineEmits(['update:goods_sn']);
//监听sn
watch(sn, function (newValue, oldValue) {
  //修改父组件
  emit('update:goods_sn',sn.value)
})

标签:goods,const,props,sn,vue3,组件,给子
From: https://www.cnblogs.com/douyuanjun/p/17834178.html

相关文章

  • vue3 子组件修改父组件的两种方法
    <jdy-goods-attr:goods_sn="goods.goods_sn"@goods_sn="(msg)=>goods.goods_sn=msg"v-model:goods_num="goods.goods_num"></jdy-goods-attr>constemit=defineEmits(['goods_sn',�......
  • vue~封装一个文本框标签组件
    用到的技术父组件向子组件的传值类型检查和默认值:您可以为props指定类型检查和默认值。这可以确保传递给子组件的数据符合期望的类型,以及在没有传递数据时具有合理的默认值。例如:props:{message:{type:String,default:'DefaultMessage'},count:{typ......
  • vue~封装一个文本框添加与删除的组件
    标签组件的效果如下组件作用这是一个div,包含了两个文本框,后面是添加和删除按钮添加按钮复制出新的div,除了文本框没有内容,其它都上面一样删除按钮将当前行div删除组件实现<template><div><templatev-for="(item,index)intags"><el-row:gutter="4"style="margin:......
  • Vue-cli 用自定义的组件有遇到过哪些问题?
    在components目录新建你的组件文件(indexPage.vue),script一定要exportdefault{}在需要用的页面(组件)中导入:importindexPagefrom'@/components/indexPage.vue'注入到vue的子组件的components属性上面,components:在template视图view中使用,例如命名为inde......
  • DevExpress WinForms HeatMap组件,一个高度可自定义热图控件!
    通过DevExpressWinForms可以为WindowsForms桌面平台提供的高度可定制的热图UI组件,体验DevExpress的不同之处。DevExpressWinForms有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。同时能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还......
  • Vue3+Element plus 实现表格可编辑
    <template><div><el-buttontype="primary"@click="handleAdd">新增</el-button></div><div><el-table:data="tableData"style="width:100%&quo......
  • vue3 与 vue2 的区别
    布尔型Attribute​布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上。disabled就是最常见的例子之一。v-bind在这种场景下的行为略有不同:<button:disabled="isButtonDisabled">Button</button>当isButtonDisabled为真值或一个空字符串(......
  • Android——自定义组件
    自定义组件共分为:自定义组合控件,自定义View,自定义ViewGroup自定义ViewGroup一共七步:1.继承ViewGroup,将统一调用第三的构造方法。重写onMeasure(),onLayout()方法,创建数据集合对象,创建孩子行列集合对象。编写常量横向外边距,纵向外边距,组件属性2.创建孩子,设置孩子,添加......
  • vue3源码学习api-vue-sfc文件编译
    vue最有代表性质的就是.VUE的文件,每一个vue文件都是一个组件,那么vue组件的编译过程是什么样的呢Vue单文件组件(SFC)和指令ast语法树一个Vue单文件组件(SFC),通常使用*.vue作为文件扩展名,它是一种使用了类似HTML语法的自定义文件格式,用于定义Vue组件。一个Vue单......
  • 基于element-ui开发组件自行制作的翻页小组件
    表格展示区<el-table:data="dis"style="width:100%;height:525px;"></el-table>翻页区<to-page:value="{page:tableData.length,current_page:current_page}"@......