1. vue3 的 v-model 指定传入某个数据
例: 父组件是这样, myName 和 maAge 是父组件内要传入子组件的数据
<h-table v-model:name="myName" v-model:age="myAge">
</table>
子组件在props中通过 name 、age 就可以接收到父组件传过来的 myName、myAge
并且通过 update:name 、update:age 就可把值传回到父组件的 myName、 myAge
例:
<script>
setup(props, { emit }) {
props:['name', 'age']
const changeName = () => {
emit('update:name', '张三')
emit('update:age', 20)
}
}
</script>
非常清爽! 点赞
2. 组件传参使用 readonly
在vue和react框架有一条规范是单向数据流,所以我们在向下传参的时候,不希望下层组件更改数据,此时我们在传参时可以使用readonly,确保传输到子组件的数据不被更改!
3.自定义指令 directive
对比vue2来说。
vue2自定义指令声明周期有5个(不是很友好,增加学习成本)
bind
inserted
update
componentUpdated
unbind
vue3中,自定义指令生命周期基本依照了vue的生命周期(减少学习成本)
created
beforMonunt
mounted
beforUpdate
updated
beforUnmount
Unmounted
注册自定义指令vue2与vue3一致
此处 vm 为 vue实例。
vm.directive('自定义指令名',{生命周期 例:
update: function(el,binding,vnode,oldVnode){}
})
这里需要注意的地方是 vm.directive('自定义指令名称',‘第二个参数’)
‘第二个参数’ 需要注意
它可以是一个对象,对象中生命周期是以键值对的形式,根据需求在对应的生命周期进行代码书写。
也可以是一个函数,当它是一个函数时,会默认被挂载到两个生命周期上。
1.在vue2中,会默认挂在 bind 与 update 上
2.在vue3中,会默认挂在 mounted 与 update 上
4.filter 过滤器
在vue2中可以使用filter 在模板中使用管道符 | 来使用filter。
在vue3中被移除,推荐使用 计算属性来替代 ,也减少了学习成本。