vue中的this.$emit方法:用于子组件中触发父组件方法并传值

vue中的this.$emit方法

  • 使用一:$emit
  • 使用二:$emit update 和 .sync 修饰符


作用:用于子组件中触发父组件方法并传值
注意: $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名。
 

使用一:$emit

//子组件中
<template><button @click="handleChildEvent">子组件中触发的事件</button>
</template><script>
export default {name:'ChildComponent',methods: {handleChildEvent() {// 触发自定义事件,并传递数据给父组件this.$emit('parent-event', 'Hello, World!');}}
}
</script>  
//父组件中
<child-component @parent-event="handleParentEvent"/><script>
export default {name: 'ParentComponent',// 注册子组件components: {ChildComponent},   methods: {handleParentEvent(data) {// 处理自定义事件的逻辑console.log(data); // 输出:'Hello, World!'}}
}
</script>  

使用二:$emit update 和 .sync 修饰符

作用:.sync可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据

// 父组件
<template>//给子组件传值时使用.sync修饰符<child :page.sync="page"></child>
</template>
<script>
export default {data(){return {page:1}}
}
</script>
//子组件中
<script>
export default {props:["page"],computed(){// 当我们在子组件里修改 currentPage 时,父组件的 page 也会随之改变 currentPage {get(){return this.page},set(newVal){//$emit update 修改父组件中的数据this.$emit("update:page", newVal)}}}
}
</script>

相当于省略了父组件给子组件多传递一个修改数据的方法

// 带 .sync 修饰符
<children :selectNode.sync="node" />// 无 .sync 修饰符,等同于
<children :selectNode="node" @update:selectNode="node=$event" />

实现子组件与父组件双向绑定的【sync】修饰符:其实sync这个修饰符是vue1.0就有的,它可以实现父子组件的双向绑定,但是Vue2.0被移除了,直到2.3.0版本发布后,又重新开始启用,由于数据安全问题,后来vue3.x后又被重新取消了。

【.sync】可以很轻松的实现子组件同步修改父组件的值,如果子组件想修改父组件的值,推荐在子组件中以 update:my-prop-name 的模式触发事件取而代之,也就是这样:

父组件: 
<text-documentv-bind:title="doc.title"v-on:update:title="doc.title = $event"
></text-document>
 子组件:
this.$emit("update:title",newTitle)
而上边的 v-on:update:title="doc.title = $event",本质上就可以用sync这个语法糖来表示,.sync后面紧接的就是父组件中需要被改变的值,看下边的例子: 
父组件:
<template><div><child-com :value.sync="text" ></child-com></div>
</template>
<script>export default{data(){return {text:"父组件的值",}},}
</script>
子组件中修改父组件的值:
<template><div @click="post"></div>
</template> 
<script>export default{methods:{post(){this.$emit('update:value',"子组件的值")}}}
</script>

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

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

相关文章

【正点原子STM32连载】 第五十五章 FreeRTOS移植实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第五…

用Python制定旅行计划

编写一个Python脚本,用于制定旅行计划。这个脚本将询问关于旅行的基本问题,并根据回答生成一旅行计划。以下是示例脚本: def create_travel_plan(): # 询问用户目的地 destination = input("请输入您的目的地:") # 询问旅行日期 start_date = input("请…

【Kuiperinfer】笔记02 GoogleTest入门

文章目录 Google Test基本概念 编写测试头文件AssertionTESTTest FixtureInvoking the Tests编写main()函数 参考 Google Test Google Test是用于编写C测试的框架&#xff0c;支持多种类型的测试&#xff0c;而不是只有单元测试&#xff08;unit test&#xff09;。 编写测试…

weblogic8版本修改控制台密码

weblogic的8.1老版本在控制台界面上没有修改密码的按钮选项&#xff0c;因此需要通过修改服务器配置文件来更新密码。 步骤1&#xff1a; 备份域目录下的DefaultAuthenticatorInit.ldift文件 通过find /域目录 -name weblogic.jar 查到jar包&#xff0c;通过命令生成文件 …

css3的var()函数

css3的var()函数 变量要以两个连字符--(横杆)(减号)为开头 变量可以在:root{}中定义, :root可以在css中创建全局样式变量。通过 :root本身写的样式&#xff0c;相当于 html&#xff0c;但优先级比后者高。 在CSS3中&#xff0c;var()函数是一个用于插入CSS自定义属性&#xff…

Vulhub 靶场训练 DC-6解析

一、搭建环境 kali充当攻击机 ip地址是&#xff1a;192.168.200.14 DC-6充当靶机 &#xff1a; IP地址暂时未知 注意&#xff1a;让两台机器的使用同一种网络适配器 二、信息收集 1、探索同网段存活的主机 ①第一种方法 arp-scan -l②第二种方法 netdiscover -i eth0 -…

Python内置函数67个语法、参数和用法详解

要获取Python解释器中所有当前可用的内置函数和变量的完整列表,您可以在Python解释器中使用dir(__builtins__)命令。这将返回一个包含所有内置函数、异常和其他内置对象的列表。 分为10类 数学运算(7): abs 绝对值divmod 商和余数max 最大min最小pow 指数幂round 取整sum 求…

npm/nodejs安装、切换源

前言 发现自己电脑上没有npm也没有node很震惊&#xff0c;难道我没写过代码么&#xff1f;不扯了&#xff0c;进入正题哈哈…… 安装 一般没有npm的话会报错&#xff1a; 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称而且报这个错&#xff0c;我们执行…

【骑行新纪元】社交风暴来袭,你准备加入骑友圈了吗?

当你的自行车轮轻轻滑过清晨的露水&#xff0c;你是否曾想与志同道合的骑友分享这一刻的喜悦&#xff1f;骑行&#xff0c;这个曾经只是简单运动的代名词&#xff0c;如今正在悄然转变。随着科技的进步和社交平台的发展&#xff0c;骑行不再只是一种健身方式&#xff0c;它还带…

【机器学习】是什么?——讲解

机器学习 机器学习是人工智能&#xff08;AI&#xff09;的一个子领域&#xff0c;它提供了系统通过数据学习并改进其性能的能力&#xff0c;而不需要人为进行显式编程&#xff0c;机器学习模型利用大量的数据样本&#xff08;训练数据&#xff09;来学习如何识别模式和关系&a…

C-指针-010

1指针 1.1语法&#xff1a; 【基类型*指针变量名】 【int *p&a】1.2语义&#xff1a; 【基类型】&#xff1a;指针变量指向的目标的数据类型 【*】&#xff1a;表示此时定义的变量是一个指针类型的变量 【&a】&#xff1a;一块存放着int类型数据的空间的地址 【*p】…

slot全局属性 <slot>标签</slot> ::slotted()伪元素 笔记240223

slot全局属性 标签 ::slotted()伪元素 MDN HTML全局属性 MDN HTML全局属性 slot MDN HTML <slot>标签元素 MDN CSS ::slotted()为元素 MDN 使用 templates and slots <slot>标签 <slot>标签是的 display 是 contents 在Web开发中&#xff0c;<s…

【高德地图】Android搭建3D高德地图详细教

&#x1f4d6;Android搭建3D高德地图详细教程 &#x1f4d6;第1章 高德地图介绍✅了解高德地图✅2D地图与3D地图 &#x1f4d6;第2章 搭建3D地图并显示✅第 1 步&#xff1a;创建 Android 项目✅第 2 步&#xff1a;获取高德Key✅第 3 步&#xff1a;下载地图SDK✅第 4 步&…

照片上多余的人怎么处理?这几种方法让你的照片更完美!

照片怎么去掉多余人像&#xff1f;这是许多摄影爱好者经常遇到的问题。有时候&#xff0c;我们拍摄了一张非常美好的照片&#xff0c;但由于某些原因&#xff0c;照片中出现了不希望出现的人物。这时候&#xff0c;我们该如何处理呢&#xff1f;下面&#xff0c;我将分享几种常…

2.5网安学习第二阶段第五周回顾(个人学习记录使用)

本周重点 ①多进程和多线程 1、进程和线程 2、多线程爆破 ②Redis数据库 1、Redis的使用 2、Redis持久化 3、Redis未授权免密登录 ③嗅探和Python攻击脚本 1、嗅探&#xff08;端口扫描和IP扫描&#xff09; 2、SCAPY的应用 3、Python攻击脚本&#xff08;SYN半连接…

【More Effective C++】条款22:采用op+=取代op+优势

采用operator实现operator优点&#xff1a; 降低维护成本&#xff0c;只需要维护operator即可&#xff1b;如果operator为publicoperator不需要称为class的友元&#xff1b;通过模板的方式自动实现operator版本&#xff1b;提供两种操作方式&#xff0c;operator效率高&#x…

计算机网络-局域网

文章目录 局域网局域网拓扑结构以太网以太网传输介质以太网时隙提高传统以太网带宽的途径以太网帧格式 局域网协议IEEE 802参考模型IEEE802.2协议LLC帧格式及其控制字段LLC提供的三种服务 IEEE 802.3协议IEEE 802.4协议IEEE 802.5协议 高速局域网100M以太网千兆以太网万兆以太网…

冲突管理最佳实践

任何团队都无法避免冲突&#xff0c;如何有效管理冲突&#xff0c;将冲突转化为团队成长和凝聚的动力&#xff0c;是任何一个团队管理者的必修课。原文: Best Practices for Managing Conflict in Engineering Management Obie Fernandez Unsplash 冲突在任何组织中都不可避免&…

计算机网络中的与或非运算

三种基本逻辑运算关系 搭建中小公司网络&#xff0c;根据网址计算&#xff0c;用户的人数 需要ip和掩码&#xff0c;确定可分配的ip数 与运算电路为串联电路&#xff0c;的&#xff0c;A,B的组合情况 具体参考三种基本逻辑运算关系

图片参考网站

摄图网-正版高清图片免费下载_商用设计素材图库 (699pic.com) AIGC数字艺术素材图片-数字艺术-数字艺术图片-摄图网 (699pic.com) 花瓣网 - 陪你做生活的设计师&#xff08;创意灵感天堂&#xff0c;搜索、发现设计灵感、设计素材&#xff09; (huaban.com) 千图网-免费在线…