目录一、定义组件属性二、fORMatter简写三、子父组件通信四、监听组件属性变化五、自定义指令总结 PS：以下知识点都是基于 vue3.x + typescri
PS：以下知识点都是基于 vue3.x + typescript + element-plus + setup语法糖 使用的。
const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
console.log(props.visible)[warning] 注意：defineProps 不用从Vue引入，setup 语法糖环境会自动识别
在 el-table-column 中使用 formatter 简写
<el-table-column label="时间" prop="createTime" :formatter="(...args: any[]) => formatTime(args[2])" />子组件：
<script setup lang="ts">
const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['closeILdialog']) // 注册触发器，defineEmits不用从vue引入，setup语法糖环境会自动识别
function onDialoGClose() {
emit('closeILdialog') // 触发
}
</script>
<template>
<el-dialog
v-model="visible"
width="900px"
@close="onDialogClose"
title="日志"
:close-on-click-modal="false"
>
</el-dialog>
</template>父组件：
<script setup lang="ts">
let ILdialog = Reactive({
visible: false
})
function closeILdialog() {
ILdialog.visible = false
}
</script>
<template>
<instruct-log :visible="ILdialog.visible" @closeILdialog="closeILdialog"></instruct-log>
</template>const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
// 监听visible
watch(() => props.visible, (newV) => {
if(newV) {
// ...
}
})
局部指令：
<script setup lang="ts">
const vFoo = {
mounted(el: any, binding: any) {
console.log(binding.value) // 123
}
}
</script>
<template>
<div v-foo="123" v-auth="true"></div>
</template>[warning] 注意：局部指令定义需要 v 开头，如：vFoo，这样才能识别到 v-foo 指令
全局指令：
const app = createApp(App)
// 权限指令
app.directive('auth', {
mounted(el: any, binding: any) {
if(!binding.value) {
el.parentnode.removeChild(el)
}
}
})到此这篇关于Vue3.x项目开发的一些常用知识点的文章就介绍到这了,更多相关Vue3.x开发知识点内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Vue3.x项目开发的一些常用知识点总结
本文链接: https://lsjlt.com/news/149130.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0