vue 父传子 子传父实现方式

news2025/1/23 7:00:19

父传子:

主要步骤:

  1. 首先在子组件props中创建一个属性,用以接收父组件传过来的值;
  2. 然后父组件中引用子组件,并在子组件标签中添加子组件props中创建的属性;
  3. 最后把需要传给子组件的值赋给该属性。

理解:

        父亲传给儿子东西,儿子在那边用一个碗接,这个碗就是props,因为传的东西不可能只是一个,所以是一个数组,父亲因为要传东西到儿子的碗里,所以要绑定儿子的碗,然后传值

props:properties的简称

prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。

代码如下:

父组件:

 子组件:

 

子传父:

主要步骤:

        1.子组件创建并监听自定义事件,

        2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件

        3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在函数的参数中接收子组件传递的参数。

理解:

儿子传给父亲,儿子通过emit去传值,父亲通过on去接收值

$emit( 传输的名字 ,想传的值)

代码如下:

父组件:

 子组件:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408240.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue父子组件生命周期执行顺序

要想弄懂Vue父子组件的生命周期执行顺序,首先要知道vue页面的生命周期钩子函数的执行顺序,这也是在面试中老生常谈的问题,同时相信大家在工作的时候也能经常碰到父子组件加载上的问题,所以,不管是面试还是工作&#xf…

前端常见的时间转换方法合集+动态时钟效果实现

1.将时间戳转换为YYYY-MM-DD HH:mm:ss格式-老方法 通过对应的年月日时分秒依次进行拼接,另外还需要对小于10的值进行处理,在前面添加字符串‘0’,转换为常见的两位数时间格式 function transformTime(timestamp new Date()) { if (time…

Vue实现生成二维码

目 录 ①首先创建一个vue项目 ②引入qrcodejs2 ③封装组件 1. 创建Vue文件 2. 定义template模板 3. 引入QRCode包 4. 进行封装 5. less控制样式 ④启动项目 1. 在终端输入启动项目命令 2. 在浏览器中输入访问地址 3. 访问生成的二维码 4. 扫码进行解析 与后端用J…

CSS实现文字描边效果

一、介绍 最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描…

ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

项目场景 ElementPlus DateTimePicker日期时间选择器 当我们使用日期时间选择器时,可能会有需求只能选择今日之前或者今日之后,又或者一周内,一个月内的时间,而其他的时间应该禁止被用户选择。 解决 直接看文档: …

【element】el-autocomplete的常见用法

前言: 这段时间突然发现很少写博客了,平时都在平衡工作和休息的时间,周末也没动过笔,而且更重要的是我找不到写的内容了,在经历的初始的新知识的学习阶段后,目前的阶段更加转入对于业务的理解,…

vite基本配置教程

👩 个人主页:不爱吃糖的程序媛 🙋‍♂️ 作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀! ✨系列专栏:前端…

C1认证之web基础知识及习题——我的学习笔记

文章目录 目录 文章目录 前言​​​​​​​ Web基础 十四、语义化标签 知识点 习题 十五、表单标签 知识点 习题 十六、转义字符 知识点 习题 十七、Head头 知识点 习题 十八、CSS引入方式 知识点 习题 十九、CSS背景 知识点 习题 二十、CSS文本属性 …

CSS合并单元格四种方式:table/display/flex/grid

目录 方式一:table【最简单写法】 方式二:display: table--不推荐 方式三:display: flex 方式四:display: grid 效果图: 方式一:table【最简单写法】 colspan:规定单元格可横跨的列数。row…

【vue2】近期bug收集与整理02

⭐【前言】 在使用vue2构建页面时候,博主遇到的问题难点以及最终的解决方案。 🥳博主:初映CY的前说(前端领域) 🤘本文核心:博主遇到的问题与解决思路 目录⭐数据枚举文件的使用⭐elementUI中分页组件使用的注意事项⭐v…

vue解决Not allowed to load local resource

前言 在进行通过本地路径进行加载图片的时候,突然就报了这个问题 Not allowed to load local resource 这个是由于安全性的问题,导致浏览器禁止直接访问本地文件 那么,这边我说一下我具体是怎么解决的吧 问题描述 我的项目是用的vue的vant…

webpack -v报错:Cannot find module ‘webpack-cli/package.json‘

-D安装了webpack和webpack-cli,-g安装了webpack和webpack-cli,但是webpack -v的时候仍然提示需要安装webpack-cli,并且安装之后会报错: 看提示应该是webpack-cli/package.json的位置获取不到正确的,但是并不知道为什么…

【附源码】解决pdf.js跨域并从url动态加载pdf文档

0. Abstract 当我们想用PDF.js从URL加载文档时,将会因遇到跨域问题而中断,且是因为会触发了PDF.js和浏览器的双重CORS block,这篇文章将会介绍:①如何禁用pdf.js的跨域?②如何绕过浏览器的CORS加载URL文件&#xff1f…

axios请求中以params或body形式传递参数的区别

一、前言: 前端发送请求最常⽤的是get请求还有post请求,get请求只能传query参数,query参数都是拼在请求地址上的,post可以传body和query两种形;我在开发的时候通常使用的是Axios第三方库进行网络请求,所以这…

教你如何用CSS修改图片颜色

看到题目是不是吓了一跳?css竟然还有这个操作?还真是第一次听说~ 原理嘛,其实很简单的,用到的就是 CSS3 滤镜filter中的drop-shadow,该滤镜可以给图片非透明区域添加投影。你可以理解为下图 它实现的效果看上去就像使原…

npm install常见报错及问题

目录一、ERESOLVE unable to resolve dependency tree1.可能性一:镜像源无法访问2.可能性二:npm版本过低或者过高3.可能性三:node和npm版本不匹配二、Error: EACCES: permission denied, mkdir /usr/local/lib/node_modules/yarn三、Error: C…

【2022-05-31】JS逆向之易企秀

提示:文章仅供参考,禁止用于非法途径 文章目录前言一、页面分析二、参数u获取三、总结前言 我滴个姥姥,好像是好久没跟了呀,主要是实在不知道写啥了 今天这个表单是最近碰到,就拿出来分享下吧 一、页面分析 表单可以…

解决:code ERESOLVE:ERESOLVE could not resolve 的报错问题

1、报错分析: 其一、报错的代码及信息为: A、报错的代码: ERESOLVE could not resolve B、报错的信息展示为: 其二、报错的问题分析: A、找到报错的代码为: npm i sass-loader7.3.1 B、为什么会报错…

JS获取当前节点的兄弟/父/子节点

目录 JS获取当前节点的方式&#xff1a; 获取子节点&#xff1a; 获取父节点&#xff1a; 获取兄弟节点 JS获取当前节点的方式&#xff1a; 通过事件监听器获取当前节点&#xff1a; <button onclick"fun(this)"></button> function fun(obj){// …

若依vue3 前端微应用改造

一、前言 这篇是记录解决若依vue3版本微应用改造&#xff0c;但是自己之前也试过vue-element-admin框架的微应用改造&#xff0c;前端主流的微应用技术不怎么挑框架的&#xff0c;而且注入方式大同小异。但自己之前尝试的时候踩过很多坑&#xff0c;但是确实比较麻烦&#xff…