Vue3.x项目开发的一些常用知识点总结

目录

• 一、定义组件属性
• 二、formatter简写
• 三、子父组件通信
• 四、监听组件属性变化
• 五、自定义指令
• 总结 

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

三、子父组件通信

子组件：

父组件：

四、监听组件属性变化

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

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

五、自定义指令

局部指令：

[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开发知识点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！