首页 > 其他分享 >vue 父子组件交互 props,emit,slot

vue 父子组件交互 props,emit,slot

时间:2024-06-13 14:45:22浏览次数:10  
标签:slot vue 插槽 vue2 props 组件 emit

props 

子组件可以通过 props 从父组件接受动态数据

vue2

 vue3

defineProps() 是一个编译时宏,并不需要导入

  

 

emit()

emit()子组件向父组件触发事件

vue2

this.$emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

 vue3

emit() 的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

 

  

<slot>

父组件可以通过插槽 (slots) 将模板片段传递给子组件

在子组件中,可以使用 <slot> 元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content)

<slot> 插口中的内容将被当作“默认”内容:它会在父组件没有传递任何插槽内容时显示

vue2

 vue3

 

 

相关文章:

https://cn.vuejs.org/tutorial/#step-12

标签:slot,vue,插槽,vue2,props,组件,emit
From: https://www.cnblogs.com/ooo0/p/18245819

相关文章

  • vue项目连接到后端接口
    背景后端采用的是若依springboot分离版本,前端是自己搭建的vue项目,不是若依的前端框架,需要免认证进行调用接口的话,注释掉安全认证配置中的鉴权认证,或者将接口加入白名单1.安装axiosnpminstallaxios--save2.在request.js中编写请求后端的路径,创建src/utils/request.jsimpo......
  • Vue在表单校验中trigger属性指定何时触发校验规则
    Vue在表单校验中trigger属性指定何时触发校验规则一、前言1.示例代码一、前言在表单校验中,trigger属性用于指定何时触发校验规则。常见的触发方式包括"change"和"blur".它们的区别如下:trigger:"change":触发时机:当表单控件的值发生变化时触发校验。应用......
  • DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门
    场景DockerCompose+Jenkins+Pipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/139631755以上使用流水线配置和打包springboot后台项目,如果要使用流水线和配置node打包vue项目,可按如下步骤。注:博......
  • vue代办事件案例实战练习,配有答案解析
    代办事件案例该案例,综合了前面所学的知识,列入点击事件绑定,双向绑定,v-for循环语句,v-model双向绑定,以及input标签的不同type形式。演示代码如下:<template><divid="kuagjia"><div><divclass="top"><spanstyle="margin-left:-700px;">学习计划表......
  • vue项目中axios封装(数据请求封装)
    一、定义utils(工具类)目录,并创建两个文件,request.js与http.jsrequest.js用于创建axios,并在请求/响应拦截时对需要传递的数据进行处理。//引入axiosimportaxiosfrom'axios'//使用前要先安装依赖:npminstallaxios//引入element-ui信息import{Message}from"elemen......
  • java+vue3+el-tree实现树形结构操作
    基于springboot+vue3elementPlus实现树形结构数据的添加、删除和页面展示效果如下代码如下,业务部分可以自行修改java后台代码importcom.baomidou.mybatisplus.core.conditions.query.QueryWrapper;importcom.daztk.mes.common.annotation.LogOperation;import......
  • 基于Java+Vue的智慧园区管理系统:推动新技术与办公场景的深度融合(源码分享)
     前言:智慧园区管理平台是一个集成了多种功能的综合性系统,旨在通过信息化、智能化手段提升园区的管理效率和服务质量。以下是针对系统的各个功能模块的简要描述:一、楼栋管理会务管理:管理园区内的会议预约、会议室使用等。园区信息:展示园区的基本信息,如位置、面积、规划等。......
  • 基于Java+Vue的企事业移动培训考试平台:提升员工能力,助力文化传递(源码分享)
    前言:企事业移动培训考试平台是一个集成多种功能的综合性平台,旨在为企业提供便捷、高效、灵活的在线培训和考试解决方案。以下是针对平台所列出的八个主要功能的详细解释:一、文档管理及在线预览允许企业上传、存储、管理和分享各种培训文档,如PPT、PDF、Word等。提供在线预览......
  • JsSIP+FreeSwitch+Vue实现WebRtc音视频通话
    效果让同事帮我测的,在两个电脑分别打开该页面,一个注册1007分机号,另一个注册1005,然后拨打视频电话依赖版本jssip:3.6.1freeswitch:1.10.5-release~64bitvue:2.6.12488错误解决在freeswitch配置文件sip_profiles/internal.xml中添加:<paramname="apply-can......
  • vue3 修改element-plus主题颜色(css版)
    vue3修改主题颜色_若依vue3改默认主题色-CSDN博客上面的是js修改-----------------------------------------------------------------------------------------------------------------------1.新建一个APPStyle.css文件代码/*8这里是要替换的样式,可以参开下面注释......