是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖
解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在使用的问题
{{getToday()}}
标准组件需要写setup函数并繁琐retrun
{{ msg }}{{getToday()}}
小结:语法糖里面的代码会被编译成组件
setup()
函数的内容,不需要通过return暴露 声明的变量、函数以及import引入的内容,即可在使用,并且不需要写
export default{}
语法糖里面的代码会被编译成组件
setup()
函数的内容。这意味着与普通的只在组件被首次引入的时候执行一次不同,
中的代码会在每次组件实例被创建的时候执行
(script-setup标签最终都会编译成setup()
函数的内容,每次实例化组件,就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件,就是实例化一次setup函数,但是script标签setup是需要写在export default{}内的,外的只是首次引入的时候执行一次)
子组件:
中可以直接使用父组件传递的props (可省略props.)
需要通过props.xx获取父组件传递过来的props
子组件父组件传递的值:{{title}}
子组件向父组件传递数据(子组件向外暴露数据)
子组件代码:
子组件
父组件代码:
父组件接收子组件传递的数据{{childData}}
父组件代码:
父组件
useSlots
和useAttrs
(少用,由于大部分人是SFC模式开发,在通过
标签就可以渲染插槽)
如果需要在script-setup
中使用slots
和attrs
需要用useSlots
和useAttrs
替代
需要引入:import { useSlots ,useAttrs } form 'vue'
在中通过
$slots
和$attrs
来访问更方便(attrs用来获取父组件中非props的传递到子组件的参数/方法,attrs 用来获取父组件中非props的传递到子组件的参数/方法,attrs用来获取父组件中非props的传递到子组件的参数/方法,slots可以获取父组件中插槽传递的虚拟dom对象,在SFC模式应该用处不大,在JSX /TSX使用比较多)
父组件:
默认插槽 具名插槽
子组件:
{{ attrs.msg == $attrs.msg }}
{{ slots == $slots }}
useSlots或许在JSX/TSX下更实用
想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx
useSlots 可以获取父组件传递过来插槽的虚拟dom对象,可以用来渲染插槽内容
大部分人是SFC模式开发,在通过
标签就可以渲染插槽,这种JSX 的写法应该是很少人会使用的
访问路由实例组件信息:route和router
setup
里不能访问this
,不能再直接访问this.$router
或this.$route
。(getCurrentInstance可以替代this但不推荐)
推荐:使用useRoute
函数和useRouter
函数替代this.$route
和this.$router