PS:以下知識點都是基於 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)
}
}
})
更多前端知識,請關注小程式,不定期有驚喜!