this.$emit使用方法【前端技术】

news2025/1/24 4:49:49

this.$emit()主要用于子组件向父组件传值。

下面就给大家举一个实际开发中使用到的案例。

需求:

        点击关联项目,弹出关联项目数据进行选择一条数据,点击确定,项目编号会回显到关联项目中。

1新增页面

2 新增页面中点击关联项目弹出的页面

 

 3实现效果

 

 实现传值需要用this.$emit代码

这个页面就是新增页面中点击关联项目弹出的页面(子页面)

 

this.$emit('projectInfo', this.linkProjectInfoNum);

参数projectInfo【方法名】:表示父组件名绑定的方法。

参数this.linkProjectInfoNum【项目编号】:表示传递给另一个页面的值。

参数可以传多个

 然后在新增页面中进行一个监听

 其中<link-bill-list就是子页面(新增页面中点击关联项目弹出的页面)的vue的文件名

ref:子页面文件名

@projectInfo就是监听的名字。下面这个

 其他的两个也是在监听,不用管,你自己需要就可以加。

然后@projectInfo="projectInfo"其中引号引起来的是对监听执行的方法

然后你可以获取到value,value就是一开始在子页面赋值的值this.linkProjectInfoNum。

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

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

相关文章

vue3全局自定义指令实现按钮权限控制

1. 文档介绍的全局自定义指令 在Vue的模板语法中我们除了使用&#xff1a;v-show、v-for、v-model等&#xff0c;Vue其实 也允许我们来自定义自己的指令。 1&#xff09;注意&#xff0c;在 Vue 中&#xff0c;代码复用和抽象的主要形式是组件。 2&#xff09;然而&#xff0c…

HTML+CSS实现搜索框

HTMLCSS实现搜索框&#xff1a; 需求分析&#xff1a; 1、输入框焦点事件 onfocus:成为焦点, 点击输入框的时候&#xff0c;出现闪烁光标&#xff0c;此时可以输入内容。 onblur :失去焦点, 点击页面空白区域&#xff0c;光标消失。此时不可以输入内容。 2、获取元素 3、…

vite配置@别名,以及如何让vscode智能提示路经

vite配置别名 vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue// 配置别名import { resolve } from "path"; // https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],// ↓解析配置resolve: {// ↓路…

HTML基础之form表单

目录 一&#xff1a;表单属性 1 name 属性 2 action属性 3 method属性 4 target属性 5 enctype属性 二&#xff1a;表单对象 1 input标签 2 多行文本textarea 3 下拉列表select 4 表单控件&#xff08;元素&#xff09;button 5 表单控件&#xff08;元素&#xff…

Vuex持久化插件(vuex-persistedstate)

为什么使用持久化 目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。 在开发的过程中&#xff0c;像用户信息&#xff08;名字&#xff0c;头像&#xff0c;token&#xff09;需要vuex中储存且需要本地储存再例如&#xff0c;购物车如果需要未登录状态下…

Router-view

我们都知道&#xff0c;路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 …

vue3项目中使用three.js

vue3项目中使用three.js前言一、three.js是什么&#xff1f;二、vue3中下载与安装three.js三、操作步骤1.创建场景2.创建物体3.添加光源4.添加相机5.开始渲染四、myThree.vue源代码五、效果图1.单个模型2.多个模型总结前言 在vue3项目中&#xff0c;通过three.js使用了一段短小…

java 课程设计——银行管理系统

银行管理系统&#xff08;java&#xff09; 环境&#xff1a; idea2020 jdk1.8 能实现的功能&#xff1a; 1.注册账户 2.登录 3.查询账户信息 4.存款 5.取款 6.向另一个账户转账 7.修改账户密码 8.注销账户 项目结构 项目演示 1.主页面&#xff1a; 2.注册账号&#xff1a;…

多行文本溢出显示省略号

文本溢出显示省略号分两种情况&#xff0c;单行文本溢出显示省略号&#xff08;参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873&#xff09;&#xff0c;另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种&#xff1a; …

解决Vue刷新后页面数据丢失的问题(sessionStorage和localStorage的用法)

一、为什么刷新后数据会丢失 vuex存储的数据只是在页面中&#xff0c;相当于全局变量&#xff0c;页面刷新的时候vuex里的数据会重新初始化&#xff0c;导致数据丢失。因为vuex里的数据是保存在运行内存中的&#xff0c;当页面刷新时&#xff0c;页面会重新加载vue实例&#xf…

初识React及React开发依赖介绍

文章目录初识ReactReact介绍React特点React的依赖介绍React的开发依赖Babel和React的关系React的依赖引入初识React React介绍 React是什么呢? 相信每个做开发的人对它都或多或少有一些印象; 这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库; 目前对于前端…

H5页面实现微信授权登录

项目需求描述&#xff1a; 用户通过扫码海报携带活动二维码跳转到h5页面&#xff0c;并且完成微信授权&#xff0c;完成授权的用户进入小程序后不再进行授权操作。这里边涉及到了两个大问题&#xff0c;一是怎样在一个域名下部署两个项目&#xff0c;二是用户点击授权之后跳转…

vue.js not detected问题解决

最近在看vue的时候&#xff0c;发现之前装过的vuedevtools提示vue.js is not detected。重装了一次后&#xff0c;发现对于没有应用vue框架的页面&#xff0c;的确是检测不到vue.js&#xff0c;所以报这个很正常&#xff1b;切换到有vue.js资源的页面&#xff0c;调试界面就会自…

史上最详细vue的入门基础

一&#xff1a;Vue Vue&#xff1a;一种用于构建用户界面的渐进式javascript框架 Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件 特定&#xff1a; 1、采用组件化模式&#xff0c;提高代码复用率&#xff0c;且让代码更好…

安装与配置webpack-dev-serve

作用 相当于在本地开启了一个服务&#xff0c;我们可以通过http网络请求访问提高了IO性能&#xff0c;因为webpack-dev-server将我们的文件编译后放到内存里面&#xff0c;以空间换时间无需我们每次都需要手动编译我们的文件&#xff0c;我们每次保存文件&#xff0c;就会自动…

【web前端面试宝典】经典10问(上篇)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;前端面试 &#x1f451;名言警句&#xff1a;海阔凭鱼…

Vue:实现TodoList案例(尚硅谷)

Vue核心&#xff1a;Vue核心&#xff1a;组件化编程&#xff08;脚手架&#xff09; 一、静态页面 app.vue 注&#xff1a; MyItem.vue不直接在app.vue中引入&#xff0c;而在MyList.vue中引入 <template><div id"root"><div class"todo-cont…

【微信小程序】一文读懂,数据请求

&#x1f352;观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新新文章啦&#xff0c;上文我们讲解了微信小程序的全局配置和局部配置&#xff0c;那么今天就让我们来学习微信小程序的数据请求&#xff0c;这可是做小程序交互效果和绑定数据动…

react生命周期详细介绍

目录 挂载&#xff1a;在组件实例被创建并插入到dom中时&#xff0c;生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render componentDidMount 更新&#xff1a;当组件的 props 或 state 发生变化时会触发更新。 componentWillReceive…

教你如何手写一个Promise

想要源码的可以看这里&#xff0c;里面也有一些其他的知识 想要手写一个promise&#xff0c;首先就要了解promise&#xff0c;想必大家都被过一些promise的面试题&#xff0c;知道一些promise的用法&#xff0c;主要考的就是一种异步编程的思想。 了解promise 我们先来看看直…