当前位置: 首页 > news >正文

vue3中 setup注意点

在这里插入图片描述

setup执行的时机:在beforeCreate之前执行一次,this是undefined。

在这里插入图片描述

在这里插入图片描述

setup参数(只能收到2个):

1 props:值 为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
2 context:上下文对象。
(1)attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this. $attrs。
(2)slots: 收到的插槽内容,相当于this. $slots。
(3)emit: 分发自定义事件的函数,相当于 this. $emit。

解析
在这里插入图片描述
注意的是setup接收参数的时候,必须有props接收声明,否则就会警告,跟vue2是不一样的。

context是一个对象
在这里插入图片描述
在这里插入图片描述
传值事件上也是不一样的。
父组件App
在这里插入图片描述
子组件
在这里插入图片描述
插槽 建议直接用 v-slot: slot名
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

vue3的生命周期钩子函数后边在说。

我们在看一下vue2 的 知识点。
插槽: slot可以给组件动态插入一些内容或组件,是实现高阶函数的重要途径,当需要多个插槽时,可使用具名插槽slot。
父子组件传值 props / this.$emit
父组件向子组件传值:在子组件标签上绑定自定义属性名(:child = ‘value’),值是父组件要传递的数据,在子组件内部通过props 属性来接收 ‘自定义属性名’,页面在展示上,通过接收的 {{属性名}} 显示。(父子之间是上下传值)
子组件向父组件传值:在子组件标签上绑定自定义事件(@change= ‘change’),子组件内部通过 $emit 给该事件推送数据 (this. $emit(‘绑定的自定义事件名’,this.数据))。父组件内部通过“函数参数”接收。(子组件之间是平行传值)

<fu>
	<zi :isdel=”fuvalue” @ziuser=”fudel”></zi>
	Methods:{
		Fudel(value){ Console.log(value) }
	}
</fu>
<zi @click=”user”>
	props:{isdel:{对象形式}} 或者 props:[“isdel”]
	methods:{
		User(){this.$emit(“ziuser”,’this.value’) }
	}
</zi>

vue2生命周期钩子函数以及每个阶段的作用

vue实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程;
常用的

beforeCreate() 在实例创建之间执行,数据未加载状态/

created() 在实例创建、数据加载后,能初始化数据,dom渲染之前执行/

beforeMount() 虚拟dom已创建完成,在数据渲染前最后一次更改数据/

mounted() 页面、数据渲染完成,真实dom挂载完成/

beforeUpadate() 重新渲染之前触发/

updated() 数据已经更改完成,dom 也重新 render 完成,更改数据/

beforeDestory() 是销毁前执行(实例仍然完全可用)/

destoryed() 则是销毁后执行/

keep-alive 缓存。

相关文章:

  • redis简介
  • 《Spark GraphX in Action》书评及作者访谈
  • vue3的 computed 计算属性 与 watch监听
  • Diomidis Spinellis:有效的调试
  • ListView的简单使用
  • vue3技术 watch时 value问题
  • 最大流学习笔记(1)
  • vue3 watchEffect 函数
  • Apaceh 多虚拟主机多站点配置两种方案
  • ubutnu安装geany
  • vue3生命周期钩子函数
  • 每天一个linux命令(11):nl命令
  • ABP文档 - 本地化
  • react-native 安卓真机环境搭建
  • vue3 自定义hook函数 和 toRef
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • 11111111
  • C++类的相互关联
  • CSS中外联样式表代表的含义
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • FineReport中如何实现自动滚屏效果
  • Git的一些常用操作
  • HTTP中GET与POST的区别 99%的错误认识
  • Javascripit类型转换比较那点事儿,双等号(==)
  • Java方法详解
  • Linux链接文件
  • mysql中InnoDB引擎中页的概念
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • Redux系列x:源码分析
  • Vue2 SSR 的优化之旅
  • 安卓应用性能调试和优化经验分享
  • 第2章 网络文档
  • 好的网址,关于.net 4.0 ,vs 2010
  • 计算机常识 - 收藏集 - 掘金
  • 老板让我十分钟上手nx-admin
  • 盘点那些不知名却常用的 Git 操作
  • 前端设计模式
  • 前端之React实战:创建跨平台的项目架构
  • 浅析微信支付:申请退款、退款回调接口、查询退款
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 系统认识JavaScript正则表达式
  • C# - 为值类型重定义相等性
  • ​ssh免密码登录设置及问题总结
  • (10)STL算法之搜索(二) 二分查找
  • (6)设计一个TimeMap
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • (Python) SOAP Web Service (HTTP POST)
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (二十三)Flask之高频面试点
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (论文阅读笔记)Network planning with deep reinforcement learning