Vue 3 的 Template 支持多个根标签,Vue 2 不支持
Vue 3 有 createApp(),而 Vue 2 的是 new Vue()
createApp(组件),new Vue()
v-model代替以前的v-model和.sync
vue3中v-model的用法
要求:
3.1. props属性名任意,假设为x
3.2. 事件名必须为"update:x"
效果:
4. context.emit
新增context.emit,与this.$emit(vue3中只能在methods里使用)作用相同
context.emit用法
5. Vue3中的属性绑定
默认所有属性都绑定到根元素
使用
使用attrs或者context.attrs获取所有属性
使用v-bing="$attrs"批量绑定属性
使用 const = context.attrs 将属性分开
5.1 使用场景
在vue2中我们在父组件绑定click事件,子组件必须内部触发click,而vue3中在父组件绑定子组件的根元素上也会跟着绑定
ButtonDemo.vue
Button.vue
上面的代码Button的click事件会在根元素div上绑定,如果我们要指定click的区域为button元素的话我们就需要使用inheritAttrs
Button.vue
如果想要一部分属性绑定在button上一部分在div上就需要在setup里
Button.vue
6.slot具名插槽的使用
vue2中的用法
子组件
父组件
vue3中子组件用法不变,父组件需要使用
父组件
7. Teleport传送门组件
8. vue3中动态挂载组件的方法
通过引入h函数第一个参数是组件,第二个是元素的属性(第一个参数组件的props,也就是直接可以在使用组件的时候传入的属性),第三个是插槽的属性。
其中我们在render里监听我们v-model绑定的update事件的时候,需要使用
9. 父组件里获取子组件内容,渲染子组件
在父组件的setUp里通过拿到子组件数组,然后通过component组件渲染
比如:
TabsDemo.vue
Tabs.vue
Tabs.vue
10. vue3中ref的使用
10.1.单个ref
10.2. v-for里的ref
11. watchEffect用来代替生命周期里的onMounted和onUpdated
初始化页面的时候watchEffect里的代码会执行,当watchEffect里的数据有更新的时候同样会执行
注意watchEffect第一次运行是在组件挂载之前,如果需要访问DOM需要将我们的watchEffect放在onMounted里
领取专属 10元无门槛券
私享最新 技术干货