vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeScript 而存在的。

我都知道普通的组件就是一个普通的对象,既然是一个普通的对象,那自然就不会获得自动的提示,

import { defineComponent } from 'vue'

const component = {
name: 'Home',
props:{
data: String,
},
setup // 没有该有的提示,这非常的不友好
} export default component

但是当我们加上 defineComponent() 之后,就完全不一样了,可以获得自动提示,vue2、vue3的自动提示都有

 
import { defineComponent } from 'vue'

const component = {
name: 'Home',
props:{
data: String,
},
setup(){
// setup 可接受两个参数,一个props,和 context
}
} export default component

接下来看看 setup 中的两个参数 props 与 context ,

props指组件传递来的参数,并且ts可以推论出props的类型.props也就是 vue2 中组件中的 props

context 有三个属性 attrs slots emit 分别对应vue2中的 slots插槽、$emit发送事件

import { defineComponent } from 'vue'

const component = {
name: 'Home',
props:{
data: String,
},
setup(props, context){
// props.data
// context.attrs context.slots context.emit
}
} export default component

作者:嘉奇
链接:https://www.jianshu.com/p/50ab6ac2e3e7
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue3中defineComponent 的作用的更多相关文章

  1. Vue3中的Proxy作用在哪里?

    目录 前言 Vue没有Proxy会怎么样? proxy开始 前言 在讲解Proxy之前,我们有些前置知识点是必要掌握的: Object相关静态函数 Reflect相关静态函数 简单说明知识盲点 名称 ...

  2. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  3. web.xml中load-on-startup的作用

    如下一段配置,熟悉DWR的再熟悉不过了:<servlet>   <servlet-name>dwr-invoker</servlet-name>   <ser ...

  4. C#中构造函数的作用

    C#中构造函数的作用 共同点: 都是实例化对象,初始化数据的 默认构造是说所有的类都从祖先object那继承了空参的构造方法,你不写与写空参构造都存在,而有参数的构造一般是自己写的,写就有不写就没有, ...

  5. MySQL数据库中delimiter的作用概述

    以下的文章主要是向大家描述的是MySQL数据库中delimiter的作用是什么?我们一般都认为这个命令和存储过程关系不大,到底是不是这样的呢?以下的文章将会给你相关的知识,望你会有所收获. 其实就是告 ...

  6. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  7. Linq中关键字的作用及用法

    Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...

  8. JAVA中protected的作用

    JAVA中protected的作用   1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是 ...

  9. url中#号的作用

    url中#号的作用就是本页面位置跳转 比如这个url地址:http://www.aaaaa.com/index.html?ad=34&m=c#red red就是index.html页面的依哥位 ...

随机推荐

  1. 2m高分辨率土地利用分类数据

    数据下载链接:百度云下载链接 土地利用数据是在根据影像光谱特征,结合野外实测资料,同时参照有关地理图件,对地物的几何形状,颜色特征.纹理特征和空间分布情况进行分析,建立统一解译标志的基础之上,依据多源 ...

  2. Collection子接口:Set接口

    1.Set 存储的数据特点:无序的.不可重复的元素具体的:以HashSet为例说明: 1. 无序性:不等于随机性.存储的数据在底层数组中并非照数组索引的顺序添加,而是根据数据的哈希值决定的. 2. 不 ...

  3. 【C++】学生管理系统

    [C++]学生管理系统 一道非常经典的C语言题目,用C++实现   题目如下: 输入功能:由键盘输入10个学生的学号.姓名.三科成绩,并计算出平均成绩和总成绩,然后将它存入文件stud.dat. 插入 ...

  4. CF1132D Stressful Training

    题目链接 题目 见链接. 题解 方法一 知识点:贪心,优先队列,二分. 显然,这道题可以用二分答案做.check 函数可以用小根堆,让维持时间最小的先充电. 但是不优化这道题会炸.有两个关键优化:一个 ...

  5. JetBrains系列IDE创建文件模板

    #coding:utf-8 ''' @version: python3.6 @author: '$USER' @license: Apache Licence @contact: steinven@q ...

  6. NLM5系列中继采集仪的常见问题

    NLM5系列中继采集采发仪常见问题 1.UART 通讯问题使用 UART 接口时一定要确认收发双方的通讯参数完全一致,包括通讯速率.数据位.校验位.停止位参数.NLM 在上电时会主动输出设备基本信息, ...

  7. GET 和 POST 请求的区别与安全性

    超文本传输协议( HTTP )是用于启用客户端与服务器之间的通信,其中 GET 请求和 POST 请求是则是 HTTP 方法中最为常用的两种.那么这 GET 和 POST 的区别到底是什么呢?两者是否 ...

  8. Kubernetes v1.24 基于containerd部署

      k8s每个节点安装containerd.   containerd安装参考<containerd安装博文>:https://www.cnblogs.com/punchlinux/p/1 ...

  9. CSDN垃圾的没有底线!

    平时写代码,经常需要百度. 今天我输入搜索关键词"access sql字符串转日期"进行百度搜索: 然后点开第一条: 这个加粗的标题可以点的,再点开: 这个内容跟我的搜索关键词有什 ...

  10. Linux ssh协议

    基础知识 ssh:secure shell protocol,安全的远程登录 作用:是建立在应用层基础上的安全协议,实现数据传输过程中数据的加密,代替telent协议 使用tcp协议,端口号为22 s ...