高级特性
1、 如何自定义v-model
在子组件中
<template>
<input type="text"
:value="txt"
@input="$emit('change',$event.target.value)"
>
</template>
<script>
export default{
model:{
prop:text,
event:'change'
},
props:{
text:String
}
}
</script>
在父组件中
<template>
<text>{{ name }}</text>
<chilren v-model="name"></chilren>
</template>
<script>
export default{
compotents:{
chilren
},
data:{
name:'123'
}
}
</script>
2、 $ nextTick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新
3、动态、异步组件
用法 :is=“component-name”
<template>
<compontent :is="abc"></compontent>
</template>
<script>
export default{
compotents:{
chilren ,
fromdamo:()=> improt('../../fromdamo') //异步导入组件,只有当使用到组件的时候才会引入
},
data:{
abc:'chilren'
}
}
</script>
4、keep-alive
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
activated () 当组件激活时调用
deactivated () 当组件失活时调用
5、mixin
可以把多个组件相同的逻辑给抽离出来,但是mixin并不是完美的解决方案,会有一些问题。
vue3.0 提出的composition API 旨在解决这些问题