Vue 高级特性总结

• 自定义v-model使用

//parent


export default {
	name: 'textVModel',
	data() {
		return {
			name: 'test'
		}
	}
}

//child


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果图：

• $nextTick使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

图1-
图二-

• refs
  在元素上定义 ref 属性，通过 $refs.dom名称获取DOM 元素

1
2
3
4
5
6

• slot
  插槽分几种：
  • 普通插槽 （父组件调用子组件时需要传入子组件无法确定的内容）

  // parent
  
  
  // child
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

  • 作用域插槽 （场景：父组件需要使用子组件内的 内置变量）

  	// parent
  	
  	
     // child
     
     
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

  • 具名插槽（场景：组件内有多个 slot）

  // parent
  
  
  // child
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24

• 动态组件
  使用场景：新闻页，不规则，可能是 text 组件开始，也可能是 image 组件开始，中间顺序错乱

	

   	
   
   
	data(){
   	return { 
   		list:[
   			{id:'1',name:'Text'},
   			{id:'2',name:'Section'},
   			{id:'3',name:'Asidt'},
   			{id:'4',name:'Text'},
   		]
   	 }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 异步组件
  使用场景：大组件，内容多，比如echarts组件，from组件，使用的时候才加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• keep-alive
  使用场景：缓存组件，频繁切换，不需要重复渲染的情况

组件不会因为 v-if 销毁，且每个组件只会 mounted 一次

1
2
3
4
5
6
7
8

• mixin - 混入
  使用场景：单独的一个js 文件，包含和 vue 实例相同的属性和方法，适用于抽离多个组件公共逻辑
  弊端：变量来源不明确，多个mixin 可能会属性冲突，会出现一对多和多对多的复杂场景

import Mixin from './mixin.js'

// mixin.js
export default{
   data(){
   		return {title: 'Mixin- 混入' }
   	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

纯属记录工作中适用，方便以后查找。不正确地方望指正，感谢！