位置: IT常识 - 正文

Vue3中的父传子和子传父如何实现(vue3父子传值)

编辑:rootadmin
Vue3中的父传子和子传父如何实现

推荐整理分享Vue3中的父传子和子传父如何实现(vue3父子传值),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue父传子组件,vue父传子组件,vue3父子传值,vue3 子传父,vue父传子和子传父,vue父传子值实时更新,vue3父子传值,vue父传子值实时更新,内容如对您有帮助,希望把文章链接给更多的朋友!

大家都知道Vue2中父传子是通过父组件绑定一个属性,子组件再用props进行接收,子传父是通过this.$emit那么Vue3中有什么不同呢?以下为您解答谜团

  #Vue3的父传子

  一.现在父组件调用子组件的时候,通过动态属性把数据传递过去

  二.在子组件通过props进行接收

  三.正常使用 / setup里面没有this 所以通过props进行父传子

1.创建两个组件,一个father父组件和一个Child子组件,然后在父组件中通过components注册子组件 并在script标签中导入子组件的地址,然后展示在页面

#父组件内容

<template> <div> <h2>父组件</h2> <!--4. 动态绑定到子组件 切换子组件进行接收--> <Child :pName="name" /> </div></template><script>//目标:父传子//导入子组件import Child from "../components/01-child.vue";// 导入ref 用于做响应式处理import { ref } from "vue";export default { setup() { //2.定义 const name = ref("你好"); //3.导出 如果想要数据在外部渲染 必须得导出 return { name, }; }, // 1.注册子组件 components: { Child, },};</script><style></style>

#子组件内容

<template> <div> <h2>子组件</h2> <!-- 2.展示到页面 --> <p>父组件传递过来的name:{{ pName }}</p> <p>父组件传递过来的加工后name:{{ ppName }}</p> </div></template><script>export default { // 1.props 接收父组件传递子组件的数据 props: ["pName"], setup(props) { // 3.可以进行动态的修改 let ppName = props.ppName; ppName = "二货"; return { ppName, }; },};</script><style></style>

#Vue3中的子传父:

Vue3中的父传子和子传父如何实现(vue3父子传值)

紧接上一个父传子咱接着写  下面有一个很好玩的东西 context是什么

<template> <div> <h2>子组件</h2> <!-- 2.展示到页面 --> <p>父组件传递过来的name:{{ pName }}</p> <p>父组件传递过来的加工后name:{{ ppName }}</p> </div></template><script>// 目标子传父export default { // 1.props 接收父组件传递子组件的数据 props: ["pName"], // 传入参数 setup(props,context) { let ppName = props.ppName; ppName = "二货"; //子传父:context是什么? console.log(context); return { ppName, }; },};</script><style></style>

setup中的参数context是什么呢?这是我们开展下一步的关键

 经过输出发现里面有attrs(多层组件传值)和emit,其中emit正是我们子传父所需要的

发现context 作用是接收额外的数据

    #emit 从context当中得到一个emit方法,用来给父组件触发事件,达到子传父的效果

    #attrs 从context当中得到一个属性,可以得到没用props接收的父传子的数据

    #slots 从context当中得到了一个属性,可以得到父组件通过slot传递过来的插槽数据

通过解构的方式得到emit等‘

子组件:

<template> <div> <h2>子组件</h2> <!-- 2.展示到页面 --> <p>父组件传递过来的name:{{ pName }}</p> <p>父组件传递过来的加工后name:{{ ppName }}</p> <div> <!-- 子传父第二步 搞一个点击事件 --> <button @click="toChild">子传父</button> </div> </div></template><script>// 目标子传父export default { // 1.props 接收父组件传递子组件的数据 props: ["pName"], // 1.传入参数 setup(props, { emit, attrs, slots }) { let ppName = props.ppName; ppName = "二货"; //子传父:context是什么? // console.log(context); // 子传父第三步 const toChild = () => { emit("ppp", "我是子组件,我改变了"); //子传父 和vue2的步骤一样,只是emit方法直接从context里面获取的 不再是this调用的 }; // 子传父第四步 导出事件 // 第五步 通过点击将自定义的ppp方法和值传给父组件 return { ppName, toChild }; },};</script><style></style>

父组件:

<template> <div> <h2>父组件</h2> <!-- 子传父第六步 父组件接收子组件传来的方法 --> <Child :pName="name" @ppp="fn" /> </div></template><script>//目标:子传父//导入子组件import Child from "../components/01-child.vue";// 导入ref 用于做响应式处理import { ref } from "vue";export default { setup() { const name = ref("你好"); //子传父第七步 事件接收 val代表子组件传入的值 const fn = (val) => { console.log(val); name.value = val; }; //.导出 如果想要数据在外部渲染 必须得导出 return { name, // 子传父最后一步 导出 fn, }; }, // 1.注册子组件 components: { Child, },};</script><style></style>

最后

 enter:如果有不清楚的地方欢迎留言!

本文链接地址:https://www.jiuchutong.com/zhishi/298427.html 转载请保留说明!

上一篇:【CVPR 2023】FasterNet论文详解(cvpr2020结果)

下一篇:没有关系的话,那就去建立关系吧(没有关系怎么表达)

  • 小米手机隐藏应用怎么找到(小米手机隐藏应用怎么改密码)

    小米手机隐藏应用怎么找到(小米手机隐藏应用怎么改密码)

  • 抖音发作品可以定位到外省吗(抖音发作品可以不显示位置吗)

    抖音发作品可以定位到外省吗(抖音发作品可以不显示位置吗)

  • 电脑一直显示正在清理(电脑一直显示正在配置更新已完成100%)

    电脑一直显示正在清理(电脑一直显示正在配置更新已完成100%)

  • 苹果11返回键怎么设置小圆圈(苹果11返回键怎么设置出来)

    苹果11返回键怎么设置小圆圈(苹果11返回键怎么设置出来)

  • 手机中框是什么(手机中框是什么塑料材质)

    手机中框是什么(手机中框是什么塑料材质)

  • 充电暖宝宝里的液体是什么(充电暖宝宝里的水能换吗)

    充电暖宝宝里的液体是什么(充电暖宝宝里的水能换吗)

  • wps什么都打不出来(wps怎么打不出来打字)

    wps什么都打不出来(wps怎么打不出来打字)

  • 苹果xsmax有单卡版本吗(苹果xsmax单卡好还是双卡好)

    苹果xsmax有单卡版本吗(苹果xsmax单卡好还是双卡好)

  • 京东E卡可以只使用一部分吗(京东e卡可以只提现吗)

    京东E卡可以只使用一部分吗(京东e卡可以只提现吗)

  • 数据库三级模式体系结构的划分有利于(数据库三级模式体系结构)

    数据库三级模式体系结构的划分有利于(数据库三级模式体系结构)

  • ps怎么羽化人物边缘(ps羽化人物边缘怎么用)

    ps怎么羽化人物边缘(ps羽化人物边缘怎么用)

  • 手机淘宝主题怎么设置(淘宝主题怎么弄)

    手机淘宝主题怎么设置(淘宝主题怎么弄)

  • 华为性能模式在哪(华为性能模式开启)

    华为性能模式在哪(华为性能模式开启)

  • hi6250是什么处理器(hi6250处理器是麒麟多少)

    hi6250是什么处理器(hi6250处理器是麒麟多少)

  • oppo录制屏幕怎么没有声音(oppo录制屏幕怎么关闭)

    oppo录制屏幕怎么没有声音(oppo录制屏幕怎么关闭)

  • vivo怎么换微信提示音(vivo手机怎么换微信图标)

    vivo怎么换微信提示音(vivo手机怎么换微信图标)

  • x27怎么找不到人脸识别(vivox27为什么搜索不到蓝牙设备)

    x27怎么找不到人脸识别(vivox27为什么搜索不到蓝牙设备)

  • 腾讯视频看直播在哪里(腾讯视频看直播一个小时多少流量)

    腾讯视频看直播在哪里(腾讯视频看直播一个小时多少流量)

  • 全民k歌移除粉丝对方知道吗(全民k歌移除粉丝和拉黑是一样吗)

    全民k歌移除粉丝对方知道吗(全民k歌移除粉丝和拉黑是一样吗)

  • 如何从OTCBTC提币到itoken钱包(otcbtc怎么提币到银行卡)

    如何从OTCBTC提币到itoken钱包(otcbtc怎么提币到银行卡)

  • 蝶式键盘是什么意思(蝶式键盘原理)

    蝶式键盘是什么意思(蝶式键盘原理)

  • 新移动硬盘怎么使用(新移动硬盘怎么激活)

    新移动硬盘怎么使用(新移动硬盘怎么激活)

  • win10安装软件被阻止(电脑上win 10安装的软件被限制怎么取消)

    win10安装软件被阻止(电脑上win 10安装的软件被限制怎么取消)

  • 帝国CMS怎么解决单次只能上传20个文件的问题(帝国cms教程官方完整版)

    帝国CMS怎么解决单次只能上传20个文件的问题(帝国cms教程官方完整版)

  • 房屋出租何时缴税
  • 印花税什么时候开始计入税金及附加
  • 税务师继续教育怎么做
  • 合同资产和合同结算
  • 购买股票交易费用计入
  • 销售商品收到的银行本票
  • 国家研发补贴政策
  • 发票章盖金额上去了
  • 汇算清缴调增的金额,如何做会计分录
  • 财务报表中的负债是什么意思
  • 福利性收入属于什么分配
  • 全年一次奖金计算
  • 电子发票和增值税电子普通发票的区别
  • 厂家取得的销售收入
  • 代开专票退票流程及说明
  • 个体工商户允许哪些经营范围
  • 用友u8计提企业所得税
  • 土地增值税地价扣除
  • 个体餐饮店交税吗
  • 诉讼过程中
  • 什么叫市净率?它有何意义?
  • 个人劳务费几个点
  • 0x0000000a蓝屏代码怎么解决
  • 公司房产税如何征收税率
  • php 获取文件类型
  • 职工教育经费可以以后年度结转吗
  • 明细分类账户定义
  • 桥梁水泥和普通水泥有什么区别
  • 增值税专用发票怎么开
  • 中小企业应交税费
  • php判断https
  • 字节在互联网什么地位
  • javascript教程
  • 并发操作的定义
  • 用友固定资产折旧方法
  • ntpq命令详解
  • kill命令用法
  • 怎样计提购销合同印花税
  • 成本核算的五个要求
  • 对公账号备用金怎么用
  • 小规模增值税减征额怎么算
  • 劳务费和工程劳务费有区别
  • 无追索权有哪些类型
  • javascript前端开发案例教程源码
  • 子公司可以吸收母公司吗
  • sql server 2008使用
  • 建筑企业异地施工预缴企业所得税
  • mysql sql性能优化
  • 在创业板上市公司首次公开发行股票的条件
  • 误餐补助需要提供发票吗
  • 商场一般是怎么缴纳租金的
  • 购买的车位是否要交税
  • 售后回租如何做会计处理
  • 未完工属于什么科目
  • 印花税每个月都报吗
  • 增值税欠税及滞纳金计算
  • 公司开业两年后辞职
  • 货物出去没有出口报关可以补吗
  • 不得免征和抵扣税额抵减额分录
  • MySQL-group-replication 配置步骤(推荐)
  • solaris开放指定端口
  • windows怎么彻底删除
  • win10系统的邮件和日历跟outlook一样嘛
  • xp系统怎么取消用户登录
  • wcu.exe是什么
  • win7推送win10
  • 如何把itunes的音乐导入ipod
  • window8.1重装系统
  • WIN10系统中WPS字体颜色浅
  • linux中rename命令详解
  • css选择器类选择器
  • python定时利用QQ邮件发送天气预报的实例
  • angularjs1.5
  • unity3D利用W,A,S,D让物体移动
  • 北京税务局发票查询
  • 中国税务是做什么的
  • 土地使用税一般谁交
  • 苏州地方税务
  • 个人所得税怎么申报
  • 用实际行动践行中国税务精神
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设