vue父子组件传值:父传子、子传父

news2024/11/19 13:32:00

最近项目中又需要用到父子组件,用了很多次之后对父子组件终于有种从善如流的感觉。会了之后再看自己写的父子组件传值的文章,感觉还是存在很多问题的,问题就不改了,在这篇文章做个总结和纠正吧。

父子组件就是在一个vue文件中引入另一个vue文件。被引入的vue文件是子组件,引入vue文件的vue文件是父组件。

1.父组件引入子组件

import引入,components调用。

import ZwFjdjForm from '../../../specialbond/modules/ZwFjdjForm'
components: {
      ZwFjdjForm
    },

 在需要调用子组件的地方调用

<ZwFjdjForm ref="ZwFjdjForm" :currentId="currentId" :canModify="canModify" ></ZwFjdjForm>

 这样子组件就被成功调用了。但是在很多情况下,我们需要父子组件互相传值

2.父组件给子组件传值

父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用 。

:子组件接收父组件数据的元素="父组件传递的值"

 这样,父组件中的数据,就成功传给子组件了。

3.子组件接收父组件传来的值

在之前的文章中,我说的是使用props接收,如下格式。

 

 这个格式是可以使用的。但是后来我说过一个问题,遇到一个项目,需要调用子组件,而我需要在子组件里调用方法。之前想的是只传id,id传过去之后在子组件调用方法。当时是失败了,结论是子组件会在页面加载之前调用,所以后来是把方法写在父组件了。

这次遇到的也是一样的问题,但是这次成功了。

子组件是这样接收父组件的值的。

props:['canModify','currentId'],

 这样是可以把id传给子组件,子组件再调用接口的,不太懂两者有什么区别。

4.子组件将值传给父组件

使用this.$emit('方法名',准备传给父组件的值)直接传

this.$emit('startDateChange',mode)//向父级组件传递参数

5.父组件接收子组件传来的值

调用方法接收

<a-tab-pane tab="基本情况" :key="refKeys[0]" :forceRender="true">
  <zw-mhk-zxzq-jbqk-form ref="zwMhkZxzqJbqkForm" :canModify="canModify" @startDateChange="startDateChange" ></zw-mhk-zxzq-jbqk-form>
</a-tab-pane>
startDateChange(data){
  this.changedStartDate = data
}

这样父组件就取到了子组件传来的值

6.父组件直接调用子组件的方法

startDateChange(data){
  this.$refs.zwMhkZxzqSzysForm.getDate(data)
},

直接$refs.子组件.子组件的方法

关于父子组件的内容,在这里也算做了个完善了,希望以后父子组件不要再出现问题了。

 之前写的父子组件传值文章:

vue父子组件传值_芝士焗红薯的博客-CSDN博客_父子组件传值

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

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

相关文章

瑞吉外卖项目:编辑员工信息与公共字段自动填充

目录 一. 编辑员工信息 1.1 需求分析 1.2 代码编写 执行流程 后端代码 二. 项目公共字段填充 2.1 问题分析 2.2 代码实现 2.3 功能完善 一. 编辑员工信息 1.1 需求分析 在员工管理列表点击编辑按钮&#xff0c;跳转至编辑页面后&#xff0c;回显员工数据进行修改。 …

前端开发利器--PxCook(像素大厨)

前端开发利器 - - PxCook&#xff08;像素大厨&#xff09;1、PxCook简述2、PxCook安装3、PxCook基本操作3.1 通过软件打开设计图3.2 常用快捷键3.3 常用工具3.4 从psd文件中直接获取数据1、PxCook简述 前端开发软件&#xff1a; PS&#xff08;Photoshop&#xff09;收费、占…

【SVG】路径<Path>标签详解,一次搞懂所有命令参数

在上一篇文章 什么是SVG&#xff1f;——SVG快速入门 中我对SVG做了基础的介绍&#xff0c;这篇文章将集中讲解<path>标签 本站链接&#xff1a;什么是SVG&#xff1f;——SVG快速入门_gxyzlxf的博客-CSDN博客 稀土掘金链接&#xff1a;什么是SVG&#xff1f;——SVG快…

npm修改默认源(默认镜像)

1 npm修改默认源(默认镜像) 首先如果之前安装过node.js的需要先卸载&#xff0c;删除npm原始默认安装目录&#xff08;在cmd命令面板执行 npm config ls 查看npm默认路径&#xff09; 在cmd命令面板中输入npm config ls 查看npm默认路径 删除操作如下所示&#xff1a; 重新安…

js实现base64,url,blob之间的相互转换

一般来说前端展示图片会通过三种方式&#xff1a; url、base64、blob 1.url: 一般来说&#xff0c;图片的显示还是建议使用url的方式比较好。 let url "http://xxxxxx" 2.base64&#xff1a; 如果图片较大&#xff0c;图片的色彩层次比较丰富&#xff0c;则不适合…

【原创】基于JavaWeb的医院预约挂号系统(医院挂号管理系统毕业设计)

项目介绍&#xff1a;后端采用JspServlet。前端使用的是Layui的一个网站模板。开发一个在线的医院预约挂号系统。从角色的划分&#xff0c;包括用户、医生、管理员。功能模块上包括了公告发布、医院信息查看、医院医生信息查看、预约医生、病例记录、挂号审核、图表统计等模块。…

css常见居中方法总结

最近跟着网上的教程做了几个网页项目&#xff0c;做的过程中关于居中涉及到了好几种方法&#xff0c;遂想将其总结归纳下来&#xff0c;一是理清自己的思路&#xff0c;二是希望能分享给需要帮助的小伙伴们。 话不多数&#xff0c;直奔主题。 本次涉及到的居中方法有七种&…

微信小程序嵌入 H5 页面(web-view)

在开发微信小程序的时候&#xff0c;我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况&#xff1b;微信小程序自带的 web-view 组件相当于 HTML 页面中的 iframe &#xff0c;方便我们在微信小程序中打开一个 H5 页面&#xff1b; 官网描述&#xff1a; 承载网页的容器&a…

微前端(无界)

前言&#xff1a;微前端已经是一个非常成熟的领域了&#xff0c;但开发者不管采用哪个现有方案&#xff0c;在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题&#xff0c;或无法提供支持。本…

vue项目中引入Luckysheet

Luckysheet 介绍 Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 实现功能 格式设置 样式 (修改字体样式&#xff0c;字号&#xff0c;颜色或者其他通用的样式)条件格式 (突出显示所关注的单元格或单元格区域&#xff1…

微信小程序(5)——如何制作好看的表格

✅ 因为 “表格” 在日常统计中无处不在&#xff0c;所以今天来做一做。但是微信小程序不支持 table 标签&#xff0c;我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。 文章目录一、从“html的table”到 “微信小程序的table”二、统一格式的表格三、非统一格式的表格…

【vuex】unknown action type:home/categoryList报错

记录一下今天遇到的bug。在做项目时&#xff0c;想进行vuex模块化开发。 在src/store下暂且建了两个小仓库home和search src/store/index.js import {createStore} from vuex; // 引入小仓库 import home from /store/home/index import search from /store/search/index// 对…

vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

目录 一、问题描述&#xff1a; 二、原因 三、解决方案 一、问题描述&#xff1a; 学习vue3.0&#xff08; Vue.js - 渐进式 JavaScript 框架 | Vue.js&#xff09;的时候一直使用的家里电脑&#xff0c;项目搭建运行一直没问题&#xff0c;公司近期用vue3.0写项目 npm init…

(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

仿钉钉流程设计器前后端源码 2022年10月17日,重磅开源! 话不多说上码云项目链接,各位觉得有帮助可以点一个star 本项目是基于这个Flowable6.7.2实现的, 后面会开一个Activiti567的分支 本项目在码云地址: Flowable-Activiti仿钉钉流程设计器前后台源码--工作流中台项目-基于…

第一次尝试制作一个钓鱼网站,小白教程,超细!

**声明&#xff1a;小白一枚&#xff0c;写下来为了记录和学习交流&#xff0c;大神不喜勿喷。 **大体思路&#xff1a;仿页面&#xff0c;社工诱导用户填写信息&#xff0c;提交传入后端&#xff0c;后端获取信息并存储&#xff0c;传回“服务器繁忙”或虚假信息并重定向到真…

js 各种时间格式的转换

js 各种时间格式的转换 时间格式示例中国标准时间Fri Mar 18 2022 14:24:45 GMT0800(中国标准时间)部分可读字符串Fri Mar 18 2022格林威治时间Fri,18 Mar 2022 06:24:45 GMT现在用的时间标准UTCFri Mar 18 2022 06:24:45 GMTIOS标准时间&#xff08;JSON时间格式&#xff09;…

Echarts常用配置项

一、常用配置项描述 title:{}//标题组件 tooltip:{},//提示框组件 yAxis:[],//y轴 xAxis:[],//x轴 legend:{},//图例组件 grid:{},//内绘网格 toolbox:{},//工具 series:[],//数据有关 calculable:true//可计…

JS高级中的constructor构造函数

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性 2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身 3.constructor 主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype重新指向原来构造他的构造函数…

Vue|计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1&#xff1a;在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装&#xff0c;效果如下图 如果用传统的方式来实现的话&#xff0c;需要…

vue2.x的h函数(createElement)与vue3中的h函数

1. vue2.x的 h 函数(createElement) 使用方法及介绍&#xff1a;&#xff08;参考官网提取&#xff09;h函数第一个是标签名字 或者是组件名字&#xff0c;第二个参数是配置项&#xff0c;第三个参数是 innerText &#xff0c;不会帮你转换节点&#xff0c;如果需要转换成节点…