当前位置: 首页 > news >正文

今日讲讲父子传值~

今天来讲讲父子传值中的几种方法~         

        项目中往往会把一些常用的公共代码抽离出来,写成一个子组件。或者在一个页面中的代码太多,可以根据功能的不同抽离出相关代码写成子组件,这样代码结构会更加简洁明了,后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍,vue中的父子组件传值,要注意的是遵守单向数据流原则。所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据;但是,子组件中不能直接修改父组件传过来的数据,必须要向父组件传递一个事件来父组件需要修改数据,即通过子组件的操作,在父组件中修改数据;这就是单项数据流

子组件需要做的事:
①首先定义一个子组件叫son。
②在子组件里面设置一个data属性,当作父组件传过来的数值。
③用props声明一下这个数值是父组件传过来的参数。

父组件需要做的事:
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要传过去的属性。

现在就说说这个父传子的方法:

:

在"标签"上传属性

<Card :name="name"></Card>

:

在props中

export default {props: {name: String},setup(props) {console.log(props.name);}
}

是不是很简单明了呢(有哪里不对或者不懂得,在评论区或者私信Q我哦~)

下面我们就说说子传父

:

触发,给一个事件传值

setup(props,{emit}) {emit("get","传递的数据");}

:

绑定传的时候起的事件名,接收参数

<Card @get="on"></Card>

http://www.lryc.cn/news/317677.html

相关文章:

  • 三、HarmonyOS 应用开发入门之运行Hello World
  • 国科大网络行为学导论代码作业--更新中
  • JAVA后端开发面试基础知识(九)——SpringBoot
  • C#调用Halcon出现尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException
  • ts基础知识
  • KLayout Python Script ------ 绘制1个 Box 物体
  • c# 编辑、删除一条数据
  • 高性能服务系列【八】C10M时代,网络IO库需要重建
  • Go语言与Rust哪一个更有发展前景?
  • STM32使用定时器驱动电机
  • C语言游戏实战(4):人生重开模拟器
  • MVC架构模式学习笔记(动力节点老杜2022)
  • docker常用操作-docker私有仓库的搭建(Harbor),并将本地镜像推送至远程仓库中。
  • 什么是MVC
  • ChatGPT浪潮来袭!谁先掌握,谁将领先!
  • Focal and Global Knowledge Distillation forDetectors
  • FX110网:1月美国零售货币资金环比上升2.61%,嘉盛环比上升1.86%
  • 全量知识系统的核心-全量知识的一个“恰当组织”的构想及百度AI答问
  • C++中using 和 typedef 的区别
  • LeetCode-1944题: 队列中可以看到的人数(原创)
  • Java基础面试题整理2024/3/13
  • MachineSink - 优化阅读笔记
  • 虾皮shopee根据ID取商品详情 API
  • 你知道数据库有哪些约束吗?
  • QT----基于QT的人脸考勤系统(未完成)
  • 机试:成绩排名
  • C编程基础四十分笔记
  • k8s关于pod
  • yum安装mysql 数据库tab自动补全
  • MBT-Net