Vue3.x开发知识点
anchovy 人气:0PS:以下知识点都是基于 vue3.x + typescript + element-plus + setup语法糖 使用的。
一、定义组件属性
const props = defineProps({ visible: { type: Boolean, default: false } }) console.log(props.visible)
[warning] 注意:defineProps 不用从vue引入,setup 语法糖环境会自动识别
二、formatter简写
在 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) } } })
总结
加载全部内容