Common knowledge points of Vue3.x project development

PS: The following knowledge points are based on the use of vue3.x + typescript + element-plus + setup语法糖 .

1. Define component properties

 const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

console.log(props.visible)

[warning] Note: defineProps do not need to be imported from vue, setup syntactic sugar environment will be automatically recognized

Two, formatter abbreviation

Used in el-table-column formatter shorthand

 <el-table-column label="时间" prop="createTime" :formatter="(...args: any[]) => formatTime(args[2])" />

3. Child-parent component communication

Subassembly:

 <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>

Parent component:

 <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>

4. Monitor component property changes

 const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

// 监听visible
watch(() => props.visible, (newV) => {
  if(newV) {
    // ...
  }
})

Five, custom instructions

Local command:

 <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] Note: The local instruction definition needs to start with v , such as: vFoo , so that the v-foo instruction can be recognized

Global directive:

 const app = createApp(App)

// 权限指令
app.directive('auth', {
  mounted(el: any, binding: any) {
    if(!binding.value) {
      el.parentNode.removeChild(el)
    }
  }
})

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!