Vue 高级特性总结
- 自定义v-model使用
//parent
<template>
<p>content:{{name}}</p>
<CustomInput v-model="name"/>
</template>
<sctipt>
export default {
name: 'textVModel',
data() {
return {
name: 'test'
}
}
}
</script>
//child
<template>
<Input type="text" :value="text" @input="@$emit('change', $event.target.value)"/>
</template>
<script>
export default {
name: 'customInput',
model: {
prop: 'text',
event: 'change'
},
props: String,
default(){
return ''
}
}
</script>
效果图：
- $nextTick使用
<template>
<ul ref="ul">
<li v-for="item in list" :key="item.id">{{item.value}}</li>
</ul>
<button @click="handleAddItem">增加两项</button>
</template>
<script>
export default {
data(){
return {
list:[
{id:'1',value:'a'},
{id:'2',value:'b'}
]
}
},
methods:{
handleAddItem(){
this.list.push({id:Date.now(),value:Date.now()})
this.list.push({id:Date.now(),value:Date.now()})
//const ulElem = this.$refs.ul
/** 图1-
点击第一次输出 2 第二次输出 4 ，因为异步渲染，data改变之后
不会立刻渲染 DOM 节点，多次 data 修改整合成一次
*/
//console.log(ulElem.childNodes.length)
//下面是使用 $nextTick后结果，如图2
this.$nextTick( () => { // dom渲染之后触发回调，获取到最新的DOM 节点
const ulElem = this.$refs.ul
console.log(ulElem.childNodes.length) // 正常输出DOM 节点长度
})
}
}
}
</script>
图1-
图二-
- refs
在元素上定义 ref 属性，通过 $refs.dom名称获取DOM 元素
<template>
<ul ref="ulElem"></ul>
</template>
<script>
const ulElement = this.$refs.ulElem // <ul></ul>
</script>
- slot
插槽分几种：- 普通插槽 （父组件调用子组件时需要传入子组件无法确定的内容）
// parent <template> <Child :url="slotData.url">{{slotData.name}}</Chiild> </template> <script> data(){ return { slotData:{ name:''Mike ，url:''www.baidu.com } } } </script> // child <template> <a :href="url"> <!-- 调用时要插入的内容 --> <slot>父组件没有传入就默认显示的内容</slot> </a> </template> <script> props:['url'] </script>- 作用域插槽 （场景：父组件需要使用子组件内的 内置变量）
// parent <template> <child :url="slotData.url"> <template v-slot="slotProps">{{slotProps.slotDatas.title}}</template> </child> </template> <script> export default { slotData:{ name:'Mike',url:'www.baidu.com' } } </script> // child <template> <a :href="url"> <slot :slotDatas="childData"></slot> </a> </template> <script> export default { childData:{title:'childTitme'} } </script>- 具名插槽（场景：组件内有多个 slot）
// parent <template> <child> <template v-slot="head">head</template> <template v-slot="section">section</template> <template v-slot="footer">footer</template> </child> </template> <script> </script> // child <template> <div class="head"> <slot name="head"></slot> </div> <div class="section"> <slot name="section"></slot> </div> <div class="footer"> <slot name="footer"></slot> </div> </template> <script></script> - 动态组件
使用场景：新闻页，不规则，可能是 text 组件开始，也可能是 image 组件开始，中间顺序错乱
<div v-for="item in list" :key="item.id">
<component :is="item.name"/>
</div>
data(){
return {
list:[
{id:'1',name:'Text'},
{id:'2',name:'Section'},
{id:'3',name:'Asidt'},
{id:'4',name:'Text'},
]
}
}
- 异步组件
使用场景：大组件，内容多，比如echarts组件，from组件，使用的时候才加载
<template>
<CustomEcharts v-if="showCustom"/>
<button @click="showCustom = true">show Custom</button>
</template>
<script>
export default {
components: {
CustomEcharts: () => import('./Echarts/CustomEcharts.vue')
},
data(){
return {
showCustom: false
}
}
}
</script>
- keep-alive
使用场景：缓存组件，频繁切换，不需要重复渲染的情况
组件不会因为 v-if 销毁，且每个组件只会 mounted 一次
<template>
<keep-alive>
<customA v-if="active === 'A'" @click="active = 'A'"/>
<customB v-if="active === 'B'" @click="active = 'B'" />
<customC v-if="active === 'B'" @click="active = 'C'" />
</keep-alive>
</template>
- mixin - 混入
使用场景：单独的一个js 文件，包含和 vue 实例相同的属性和方法，适用于抽离多个组件公共逻辑
弊端：变量来源不明确，多个mixin 可能会属性冲突，会出现一对多和多对多的复杂场景
<template>
<div>{{title}}</div>
</template>
import Mixin from './mixin.js'
<script>
data(){
return {}
}
</script>
// mixin.js
export default{
data(){
return {title: 'Mixin- 混入' }
}
}
纯属记录工作中适用，方便以后查找。不正确地方望指正，感谢！