手把手教你Vue3自定义组件(setup语法糖版)

Vue3 setup Cmp.png

Vue 3.0 在今年2月7日已经正式转正，经过这两年的尝鲜和测试，已经比较稳定，个人建议在支持现代浏览器的项目中都可以使用Vue 3.0+来进行开发，原生支持TypeScript这点是真的香，Vue 3的好处还是很多的，好了话不多说，这次我们就来聊一聊

• defineProps 和 defineEmits 都是只在

  Expose

  使用

  当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

  v-model

  v-model其实是一个语法糖

  它代表声明了一个modelValue的属性以及一个update:modelValue的事件

  Vue 3 中你可以通过 propsName + update:propsName 来自定义v-model

  也就是说：一个组件里可以定义多个v-model

  // page
  
  
  // components
  
  

  provide 与 inject

  这里需要用到 provide() 与 inject()

  父组件：

  子组件：

  总结

  目前笔者整理的就这么多，我自己在开发组件的过程中常用到的目前也就这些知识点

  当然还有函数式组件相关的写法，这个可能大部分人不常会用到，组件库考虑到动态性或许会选择

  不过我们做业务组件时我还是建议大家使用单文件组件

  维护性还是高了不少的

  喜欢的就点赞收藏起来吧~