首页 > 其他分享 >【前端】vue之父子组件传值

【前端】vue之父子组件传值

时间:2023-02-15 11:23:35浏览次数:50  
标签:vue 传入 参数 props 组件 emit 传值 属性

方式1:props+$emit

父传子:

父组件向子组件传递参数是通过props属性的形式传入

  1. 子组件配置props属性,其中填入父组件传入的参数名称
  2. 父组件写入子组件,并在子组件中加入需要传入的参数
    注意,props属性为单向数据传输,即只能从父组件向子组件传递

子传父:

子组件向父组件传递参数是通过绑定子组件和父组件的事件,通过事件方法的参数方式传递参数

  1. 在子组件的事件方法中通过$emit方法设置属性名称和参数
  2. 在父组件中写入子组件并绑定emit方法中约定的属性名称及参数,并传入父组件的事件方法

方式2:$ref

标签:vue,传入,参数,props,组件,emit,传值,属性
From: https://www.cnblogs.com/ermiao-zy/p/17122107.html

相关文章

  • 解决vue和idea端口号不同-即跨域问题
    当vue端口号为:8081,idea端口号为8080  网页响应Request解决方法在idea的在Controller类上加上如下注解:@CrossOrigin(origins={"*","null"})   ......
  • CentOS中使用Docker+nginx部署Vue打包的dist项目
    场景CentOS7中Docker的安装与配置首先按照上面在CentOS7中安装Docker注:关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现1、首先打包Vue项目成dist文......
  • vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法
    (1)props/$emit 适用父子组件通信(2) ref 与 $parent/$children 适用父子组件通信(3)$attrs/$listeners 适用于隔代组件通信(4)provide/inject 适用于隔代组......
  • 使用vant-ui二次封装日期范围组件
    在做移动端的项目中,经常会用到选择日期范围的业务需要,vant官方只有弹出框,日期显示的框需要自己写,因此我封装了一个日期显示框和弹出框结合的组件:  其中双向绑定使用......
  • 核心二进制组件源码之kube-apiserver
    什么是kube-apiserverkube-apiserver中文翻译为KubernetesAPI服务器,英文在有时候的阐述中会用KubernetesAPIserver,说的都是kube-apiserver.KubernetesAPIserve......
  • 界面组件Telerik ThemeBuilder R1 2023开创应用主题研发新方式!
    TelerikDevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库,加快开发速度。TelerikDevCraft提供最完整的工具箱,用于构......
  • 解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题
    问题复现:正常状态下:切换到其他页面再切换回来:问题解决:其实这个问题的解决方式官网写得清清楚楚,我们看看官网怎么解决的:接下来我用代码解释下这句话(正确的做法是,在......
  • Vue+Electron开发跨平台桌面应用实践
    背景公司去年对 CDN 资源服务器进行了迁移,由原来的通过 FTP 方式的文件存储改为了使用 S3 协议上传的对象存储,部门内@柴俊堃同学开发了一个命令行脚本工具 Rapi......
  • vue-2 插值语法
    插值语法mvm演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/vue.js"></script></head><bod......
  • vue-1
    drf回顾#1drf入门规范-前后端分离模式-前后端混合-postman-restful规范-drf:django的app#2序列化类(重点)-Serializer-字段类-字段参数-局部钩子-全局钩......