Vue3.x項(xiàng)目開發(fā)的常用知識(shí)點(diǎn)有哪些

這篇文章主要介紹“Vue3.x項(xiàng)目開發(fā)的常用知識(shí)點(diǎn)有哪些”，在日常操作中，相信很多人在Vue3.x項(xiàng)目開發(fā)的常用知識(shí)點(diǎn)有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3.x項(xiàng)目開發(fā)的常用知識(shí)點(diǎn)有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

PS：以下知識(shí)點(diǎn)都是基于 vue3.x + typescript + element-plus + setup語法糖 使用的。

一、定義組件屬性

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

console.log(props.visible)

[warning] 注意：defineProps 不用從vue引入，setup 語法糖環(huán)境會(huì)自動(dòng)識(shí)別

二、formatter簡寫

在 el-table-column 中使用 formatter 簡寫

<el-table-column label="時(shí)間" prop="createTime" :formatter="(...args: any[]) => formatTime(args[2])" />

三、子父組件通信

子組件：

<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['closeILdialog']) // 注冊觸發(fā)器，defineEmits不用從vue引入，setup語法糖環(huán)境會(huì)自動(dòng)識(shí)別
function onDialogClose() {
  emit('closeILdialog') // 觸發(fā)
}
</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>

四、監(jiān)聽組件屬性變化

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

// 監(jiān)聽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，這樣才能識(shí)別到 v-foo 指令

全局指令：

const app = createApp(App)

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

到此，關(guān)于“Vue3.x項(xiàng)目開發(fā)的常用知識(shí)點(diǎn)有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！