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

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

  • 价内税有哪些税种
  • 出口退税三类企业指什么意思
  • 小规模纳税人增值税申报表怎么填
  • 附加税减半征收政策从什么时候开始
  • 养蜂合作社怎么申请补贴
  • 运输公司租赁车辆开几个点的发票
  • 耕地占用税的纳税人是谁
  • 增值税专用发票可以开电子发票吗
  • 行政事业性收据上面的角分无是右下划线吗
  • 存货清查的结果
  • 季节性停用的设备应计提折旧吗
  • 房地产土地增值税优惠政策
  • 外汇结汇的方法有哪些呢?
  • 购买的车位是否有产权证
  • 农产品收购发票上的买价含税吗
  • 所有者权益减少资产减少案例
  • 把十六点改成十五点半起床
  • 未抵扣的进项税在资产负债表里怎么填
  • 土地出让金如何缴纳
  • 丧失控股权的后果
  • 以现金收回已核销的不良贷款分录?
  • 个人所得汇算清缴是什么
  • 收到一张增值税红冲发票
  • 两台mac怎么一起用
  • 个人所得税计提缴纳会计分录
  • rtmservice.exe - rtmservice是什么进程 有什么用
  • mtask.exe - mtask是什么进程 有什么用
  • apache配置多个项目
  • 员工补偿金分录
  • 坏账准备怎么做资产负债表
  • 洛阿雷城堡,西班牙韦斯卡 (© Sebastian Wasek/Alamy)
  • 在沙滩上的语句
  • 多目标pso
  • 售后租回怎么理解
  • 学生誓词最新2022年
  • 预付卡销售和充值计入什么费用
  • 印花税的营业账簿是什么意思
  • 固定资产加速折旧最新税收政策2023
  • 建筑业差额纳税申报
  • 成品油涉及范围有哪些
  • 股东投资款可以拿出来吗
  • 土地出让金返还比例是多少
  • 办公楼开始建造前专门借款的利息费用
  • 发给客户的红包是什么费用
  • 销售自行开发的房地产项目的增值税
  • 当月发票已认证还能作废吗
  • 累计减免所得税
  • u8委外怎么核销
  • 企业会计准则和小企业准则的区别
  • 资产减值损失属于营业外支出吗
  • 企业如何建账做账
  • 如何监测和优化电池寿命
  • mysql索引作用的简单理解
  • 在64位的Ubuntu系统上安装32位的WPS的方法
  • win8固态硬盘
  • 电脑周边是什么
  • linux find命令详解xargs
  • linux yum命令详解
  • tdxcef.exe进程
  • ubuntu系统键盘无用
  • win7系统防火墙无法关闭
  • win8 ui
  • linux安装atop
  • 简述android多线程编程的实现方式
  • Unity3D游戏开发(第2版)pdf
  • 怎样用python
  • JavaScript中Number.NEGATIVE_INFINITY值的使用详解
  • JavaScript中setFullYear()方法的使用详解
  • jquery可以实现哪些效果
  • listview subitems
  • android电话簿
  • python 遍历数组
  • python中用户登录
  • 甘肃税务局电子发票怎么开
  • 税务人员服务态度恶劣怎么办
  • 地方税务局工作内容
  • 江苏电子税务局社保缴费查询网站
  • 企业年度申报怎么修改
  • 广东2020医保缴费要多少
  • 长沙买房后多久可以提取公积金
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设