Vue3.x项目开发的常用知识点有哪些

这篇文章主要介绍"Vue3.x项目开发的常用知识点有哪些"，在日常操作中，相信很多人在Vue3.x项目开发的常用知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue3.x项目开发的常用知识点有哪些"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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  }})// 监听visiblewatch(() => 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[xss_clean].removeChild(el)    }  }})

到此，关于"Vue3.x项目开发的常用知识点有哪些"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！