位置: 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结果)

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

  • 荣耀60隔空手势怎么设置(荣耀60隔空手势翻页)

    荣耀60隔空手势怎么设置(荣耀60隔空手势翻页)

  • 惠普1005和m1005的区别(惠普m1005和1005w)

    惠普1005和m1005的区别(惠普m1005和1005w)

  • 乘车码有优惠吗(南京支付宝乘车码有优惠吗)

    乘车码有优惠吗(南京支付宝乘车码有优惠吗)

  • 喵喵机连不上手机怎么办(喵喵机p1连不上手机)

    喵喵机连不上手机怎么办(喵喵机p1连不上手机)

  • 人人视频有电脑版的吗(云视频)

    人人视频有电脑版的吗(云视频)

  • 华为skt-al00什么型号(华为sktal00什么型号多少钱)

    华为skt-al00什么型号(华为sktal00什么型号多少钱)

  • 微信开不了视频怎么回事(微信开不了视频聊天)

    微信开不了视频怎么回事(微信开不了视频聊天)

  • 合并单元格要选定几个单元格(合并单元格要选什么)

    合并单元格要选定几个单元格(合并单元格要选什么)

  • qq里的钱可以用来干什么(qq里的钱可以用到哪些软件)

    qq里的钱可以用来干什么(qq里的钱可以用到哪些软件)

  • 企业id是什么(企业id是什么意思啊)

    企业id是什么(企业id是什么意思啊)

  • 高德地图离线导航怎么用不了(高德地图离线导航是什么意思)

    高德地图离线导航怎么用不了(高德地图离线导航是什么意思)

  • ipad在保修期去哪里修(ipad在保修期内)

    ipad在保修期去哪里修(ipad在保修期内)

  • word里的图片怎么保存桌面(word里的图片怎么批量设置大小)

    word里的图片怎么保存桌面(word里的图片怎么批量设置大小)

  • 手机有指南针吗(手机有指南针吗在哪里)

    手机有指南针吗(手机有指南针吗在哪里)

  • 刷宝提现不了(刷宝提现越来越麻烦)

    刷宝提现不了(刷宝提现越来越麻烦)

  • vue时长怎么调(vue设置时间格式)

    vue时长怎么调(vue设置时间格式)

  • 图虫怎么不能设置自己的图像(图虫怎么设置不了封面)

    图虫怎么不能设置自己的图像(图虫怎么设置不了封面)

  • 华为nova5pro和5i有什么区别(华为nova5pro和5i的区别)

    华为nova5pro和5i有什么区别(华为nova5pro和5i的区别)

  • 荣耀8x支持无线充电吗(荣耀哪款支持无线充电)

    荣耀8x支持无线充电吗(荣耀哪款支持无线充电)

  • gif怎么转换成jpg(GIF怎么转换成7z)

    gif怎么转换成jpg(GIF怎么转换成7z)

  • boss直聘如何投递简历(boss直聘如何投简历)

    boss直聘如何投递简历(boss直聘如何投简历)

  • el-table(type=“selection“)多选框两种回显

    el-table(type=“selection“)多选框两种回显

  • 【1】从零开始学习目标检测:YOLO算法详解(小说《从零开始》)

    【1】从零开始学习目标检测:YOLO算法详解(小说《从零开始》)

  • 遗传算法python进阶理解+论文复现(纯干货,附前人总结引路)(遗传算法排课代码python)

    遗传算法python进阶理解+论文复现(纯干货,附前人总结引路)(遗传算法排课代码python)

  • rmmod命令  移除内核模块(rm -rf/指令指删除什么)

    rmmod命令 移除内核模块(rm -rf/指令指删除什么)

  • 小规模纳税人开专票税率是1%还是3%
  • 现金流量表和其他表的勾稽关系
  • 当月开票可以当月缴税吗
  • 百旺税控盘自己用不了
  • 物流进项税
  • 核定征收财务报表
  • 收据盖公章要注意哪些
  • 银行回单手续费分录
  • 微商怎么交易流程
  • 代员工缴纳的个税放什么科目
  • 以前年度已交增值税额
  • 停车场需要对车辆负责吗
  • 发票上面税率地方为*号代表什么
  • 金税盘里的增值税怎么算
  • 三证合一后怎么看税号
  • 销售额没有达到要求企业采取措施
  • 30万以下免征附加税包含30万吗
  • 企业交纳房产税,土地使用税、车船使用税应借记( )账户
  • 电子税务局如何开票操作
  • 境外公司在境内取得的收入如何交税
  • win11如何连接网址
  • windows11不显示桌面
  • 国家信用信息公司系公示
  • 公司不给钱打那个电话
  • 无法收回的保证金计入营业外支出汇算清缴调增填其他吗
  • window10今天更新
  • 罂粟是不是草果
  • 社保征集单是什么样子的
  • php播放本地音乐
  • 长期待摊费用与预付账款的区别
  • 企业解除人员什么意思
  • v-model的双向绑定原理
  • 工会经费计提基数包括绩效工资吗
  • vue全局引入js文件
  • 损失函数解读例题
  • php 接口规范
  • php能开发微信小程序吗
  • python怎么做gui
  • 企业所得税营业收入包括什么
  • 应收代垫款
  • 会计备案报送期间
  • css的transition滑动效果
  • 电子发票怎么清盘操作流程
  • php 更新
  • 无形资产摊销年限
  • 小微企业应纳税所得额计算
  • 私车公用可以报销哪些费用
  • 简述银行存款对应的业务
  • 配置英文
  • 退个税需要提供哪些资料
  • 个体工商户开普票需要进项票吗
  • 营改增后转让土地使用权怎么交增值税
  • 所得税汇算清缴退税会计分录怎么做
  • 税控盘服务费会计科目
  • 注销基本户必须注销专户吗
  • 预提费用在新会计准则下该如何列支?
  • 私企的会计都做什么
  • 结账时应当结出每个账户的期末余额对吗
  • 判断数据库表是否为空
  • mysql 5.6新特性
  • mysql 存过
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • 苹果mac录制屏幕
  • fedora系统怎么安装
  • vim显示中文乱码
  • win10系统虚拟机安装教程win7
  • 电脑开机蓝屏怎么解决xp系统
  • centos6 iptables配置
  • perl读取文件内容逐行处理
  • Linux动态链接库编译
  • js网页自动化
  • js中用var定义变量的格式
  • 如何大小写字母转换
  • mysql批量建表脚本
  • angular.js
  • android开发之apritag
  • 数组添加数组
  • 税务局不动产交易缴税方案
  • 网上报税失败怎么办
  • 公司零申报可以交社保吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设