defineComponent基本用法
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中的attrs属性、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
扩展知识:
vue3之组件结构(defineComponent,setup函数)
在vue3中,对组件整体结构做一些调整,先看一个组件案例:
import {ref, reactive, defineComponent, Ref, onMounted} from "vue";
import {settingsStore} from "/@/store/module/settings";
import {IRoleList} from "/@/interface/role/list.interface";
import {IHttpResult} from "/@/interface/common.interface";
import { ILogListParams } from "/@/interface/settings/log.interface";
export default defineComponent({
name: "LogList",
setup() {
const logList: Ref<IRoleList[]> = ref([]);
const columns = [
...
];
const pagination = ref({
"show-quick-jumper": true,
total: 100,
current: 1,
"show-size-changer": true,
"show-total": (total: number, range: number[]) => `${range[0]}-${range[1]} 共 ${total} 条`,
"pageSize": 10
});
const columnsList = ref(columns);
const params: ILogListParams = reactive({
page: 1,
pageSize: 10
});
onMounted(() => {
findLogList();
});
/*查询日志列表*/
const findLogList = () => {
settingsStore.findLogList(params).then((res: IHttpResult) => {
const data = res.data;
pagination.value.total = data.total;
logList.value = data.list;
});
};
/*修改状态*/
const onChange = (pagination: {current: number, pageSize: number}) => {
params.page = pagination.current;
params.pageSize = pagination.pageSize;
};
/*删除*/
const onDelete = (id: number) => {
alert(id);
};
return {
columnsList,
logList,
onDelete,
onChange,
pagination
};
}
});
从上面组件代码中,可以看出在vue3中没有this对象, 所有的逻辑代码都写在setup方法里面,若是要在HTML模板页面中使用变量或者方法, 需要在setup方法return出去.
setup是Vue3 的一大特性函数, 它有几个特性:文章来源:https://www.toymoban.com/news/detail-445655.html
- setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数
- setup函数是 Composition API(组合API)的入口
- 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
setup函数的注意点:
vue3虽然支持vue2.x版本的写法,但也有一些要注意的地方文章来源地址https://www.toymoban.com/news/detail-445655.html
- 由于在执行 setup函数的时候,还没有执行 Created 生命周期方法,所以在 setup 函数中,无法使用 data 和 methods 的变量和方法
- 由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined
- setup函数只能是同步的不能是异步的
(1)上面的组件中用defineComponent包裹了组件;
(2)defineComponent函数,只是对setup函数进行封装,返回options的对象;
(3)defineComponent最重要的是:在TypeScript下,给予了组件 正确的参数类型推断 。
(4)defineComponent可以给组件的setup方法准确的参数类型定义.
(5)defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
(6)defineComponent 可以正确适配无 props、数组 props 等形式
(7)引入 defineComponent() 以正确推断 setup() 组件的参数类型
到了这里,关于vue3中defineComponent 的作用详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!