1、Vue3相关语法内容
- 赋值语句(ref、reactive系列)
- 组件传值(父子,子父)
- watch,watchEffect监听
- slot具名插槽
- provide和inject
- 组件内双向数据绑定v-model
1、赋值语法(ref,reactive)
1.1、ref 、isRef、 shallowRef、triggerRef、customRef 支持所有的类型(原因没有泛型约束)
1.2、 reactive、readonly、shallowReactive (支持引用数据类型,泛型约束)
reactive (target:T) // 源码实例 继承与 object。
2、to系列(toRef、toRefs、toRaw)
2.1 toRef
2.2 toRefs
2.3 toRaw
脱离响应式对象 const stu = {name:"1",age:"2"}; toRaw(stu) // {name:"1",age:"2"}
2、组件传值
2.1.1、父--->子 基本数据传参 [不是TS版](defineProps )
2.1.2、父--->子 事件数据传参 [不是TS版](defineExpose)(父调用子组件的方法)
2.1.3 子---> 父 事件传参【不是TS版本】($emit)
2.2.1 基本数据类型传参(TS版本)(withDefaults)
3、监听函数(watch,watchEffect)
3.1 watch
位置
3.2 watchEffect
4、插槽(slot)
插槽就是子组件中的提供给父组件使用的一个占位符,用(< slot > </ slot>) 表示,父组件可以在这个占位符中填充任何模板代码,填充的内容会替换子组件的< slot>< /slot>标签。
4.1、具名插槽
4.2、作用于插槽
4.3、动态变量插槽
5、provide和inject
project 和 inject 主要用于 多层组嵌套传参。
5.1、用法
6、组件内双向数据绑定v-model
在Vue3 v-model 是破坏性更新的 v-model在组件里面也是很重要的 v-model 其实是一个语法糖 通过props 和 emit组合而成的
prop:value -> modelValue; 事件:input -> update:modelValue; v-bind 的 .sync 修饰符和组件的 model 选项已移除 新增 支持多个v-model