您现在的位置是：网站首页> 编程资料编程资料
Vue3编程流畅技巧使用setup语法糖拒绝写return_vue.js_
2023-05-24
135人已围观
简介 Vue3编程流畅技巧使用setup语法糖拒绝写return_vue.js_
标准组件 {{getToday()}}
小结：
（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）
2、
3、组件通信:
在 子组件： 子组件向父组件传递数据（子组件向外暴露数据） 子组件代码: 父组件代码: 接收子组件传递的数据{{childData}} 父组件代码: 如果需要在 需要引入：import { useSlots ,useAttrs } form 'vue' 在 父组件: 子组件： {{ attrs.msg == $attrs.msg }} {{ slots == $slots }} useSlots或许在JSX/TSX下更实用 想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容 大部分人是SFC模式开发，在 推荐：使用 中可以直接使用父组件传递的props （可省略props.）defineEmit 代替emit
4.
5.语法糖其他功能
useSlots 和 useAttrs （少用，由于大部分人是SFC模式开发，在通过script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）具名插槽
通过6.在setup访问路由
setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推荐）useRoute 函数和useRouter函数替代this.$route 和 this.$router