Young Kbt blog
Young Kbt
2022-07-22
目录

Vue2 - 组件

# 脚手架创建

在命令窗口创建项目：

vue create test
1

test 是项目名字。

# 脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 关于不同版本的Vue

vue.js 与 vue.runtime.xxx.js 的区别：

  • vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器
  • vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能；没有模板解析器

因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 这个配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。

# vue.config.js配置文件

  • 使用 vue inspect > output.js 可以查看到 Vue 脚手架的默认配置。
  • 使用 vue.config.js 可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

# 脚手架分析

首先提供一个主入口 main.js 文件，进行入口访问、第三方引入、项目管理等。

/* 
	该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入 App 组件，它是所有组件的父组件
import App from './App.vue'
// 关闭 Vue 的生产提示
Vue.config.productionTip = false


// 创建 Vue 实例对象：vm
new Vue({
	el:'#app',
	// render 函数完成了这个功能：将 App 组件放入容器中
    render: h => h(App),
	// render:q => q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Vue 有很多的 Vue 文件，那么我们需要统一管理 Vue 文件，则需要一个 Vue 文件作为「老大」，引入其他 Vue 文件，进行 Vue 文件统一管理，这个文件叫 App.vue。

后面带有 .vue 的文件统一叫 Vue 组件。

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	// 引入组件
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

可以看到，App.vue 文件引入了 School 组件、Student 组件，并且在 components{} 里注册，否则无法使用这两个组件。

# ref属性

  • 被用来给元素或子组件注册引用信息（id 的替代者）
  • 应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）
  • 使用方式：
    1. 打标识：<h1 ref="xxx">.....</h1>
    2. 获取：this.$refs.xxx
<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	// 引入 School 组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) // 真实 DOM 元素
				console.log(this.$refs.btn) // 真实 DOM 元素
				console.log(this.$refs.sch) // School 组件的实例对象（vc）
			}
		},
	}
</script>
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

# props配置项

  • 功能：让组件接收外部传过来的数据

  • 传递数据：<Demo name="xxx"/>

  • 接收数据：

    1. 第一种方式（只接收）：props:['name']

    2. 第二种方式（限制类型）：props:{name: String}

    3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
	name:{
        type: String, // 类型
        required: true, // 必要性
        default: '老王' // 默认值
	}
}
      1
      2
      3
      4
      5
      6
      7
<!-- 传参数给 Student 组件 -->
<Student name="李四" sex="女" :age="18"/>

<!-- Student 组件代码 -->
<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一名学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge
			}
		},
		// 简单声明接收
		// props:['name','age','sex'] 

		// 接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		// 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, // name 的类型是字符串
				required:true, // name 是必要的
			},
			age:{
				type:Number,
				default:99 // 默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>
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
37
38
39
40
41
42
43
44
45
46

备注：props 是只读的，Vue 底层会监测对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props 的内容到 data 中，然后去修改 data 中的数据。

# mixin（混入）

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被「混合」进入该组件本身的选项。

使用方式：

  • 第一步定义混合：
{
    data(){....},
    methods:{....}
    ....
}
1
2
3
4
5

  • 第二步使用混入：

    • 全局混入：Vue.mixin(xxx)，全局混入使用时格外小心，一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑

    • 局部混入：mixins:['xxx']

    • 只要混入 xxx，那么 xxx 的内容就自动 「放到」组件里

实例

编写 mixin.js 文件：

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Student.vue 组件引入 mixin.js 内容：

<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
        <h2>学生性别：{{x}}</h2>
        <h2>学生性别：{{y}}</h2>
	</div>
</template>

<script>
	import {hunhe, hunhe2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		mixins:[hunhe,hunhe2] // hunhe 和 hunhe2 的内容自动放到这组件里
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行「合并」，如果两个对象键名冲突时，取组件对象的键值对。

如果有多个同名钩子函数，则将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子 之前 调用。

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

# 插件

  1. 功能：用于增强 Vue

  2. 本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。

  3. 定义插件：

    对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

  4. 使用插件：Vue.use()

实例

plugins.js 文件

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}
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
37
38

在 main.js 文件引入插件：

// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 引入插件
import plugins from './plugins'
// 关闭 Vue 的生产提示
Vue.config.productionTip = false

// 应用（使用）插件
Vue.use(plugins, 1, 2, 3)

// 创建 vm
new Vue({
	el:'#app',
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# scoped样式

  • 作用：让样式在局部生效，防止冲突，即 seyle 里的样式只在本组件里有效，其他组件哪怕存在相同的元素，也不会生效
  • 写法：<style scoped>

# TodoList案例

利用 Vue 写一个页面，实现记录当天要做的事情等功能。

目录结构

|
|—— components
|	|—— MyFooter.vue
|	|—— MyHeader.vue
|	|—— MyHeader.vue
|	|—— MyItem.vue
|	|—— MyList.vue
|
|—— App.vue
|—— main.js
1
2
3
4
5
6
7
8
9
10

# 代码

main.js 入口文件

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 关闭 Vue 的生产提示
Vue.config.productionTip = false

// 创建 vm
new Vue({
	el:'#app',
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12

App.vue 入口组件

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyHeader :addTodo="addTodo"/>
				<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
				<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MyHeader from './components/MyHeader'
	import MyList from './components/MyList'
	import MyFooter from './components/MyFooter.vue'

	export default {
		name:'App',
		components:{MyHeader, MyList, MyFooter},
		data() {
			return {
				// 由于 todos 是 MyHeader 组件和 MyFooter 组件都在使用，所以放在 App 中（状态提升）
				todos:[
					{id: '001', title: '抽烟', done: true},
					{id: '002', title: '喝酒', done: false},
					{id: '003', title: '开车', done: true}
				]
			}
		},
		methods: {
			// 添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
			// 勾选 or 取消勾选一个 todo
			checkTodo(id){
				this.todos.forEach((todo)=>{
					if(todo.id === id) todo.done = !todo.done
				})
			},
			// 删除一个 todo
			deleteTodo(id){
				this.todos = this.todos.filter( todo => todo.id !== id )
			},
			// 全选 or 取消全选
			checkAllTodo(done){
				this.todos.forEach((todo)=>{
					todo.done = done
				})
			},
			// 清除所有已经完成的 todo
			clearAllTodo(){
				this.todos = this.todos.filter((todo)=>{
					return !todo.done
				})
			}
		}
	}
</script>

<style>
	/*base*/
	body {
		background: #fff;
	}
	.btn {
		display: inline-block;
		padding: 4px 12px;
		margin-bottom: 0;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}
	.btn-danger {
		color: #fff;
		background-color: #da4f49;
		border: 1px solid #bd362f;
	}
	.btn-danger:hover {
		color: #fff;
		background-color: #bd362f;
	}
	.btn:focus {
		outline: none;
	}
	.todo-container {
		width: 600px;
		margin: 0 auto;
	}
	.todo-container .todo-wrap {
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
</style>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

MyHeader.vue 头部组件

<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'MyHeader',
		// 接收从 App 传递过来的 addTodo
		props:['addTodo'],
		data() {
			return {
				// 收集用户输入的 title
				title:''
			}
		},
		methods: {
			add(){
				// 校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				// 将用户的输入包装成一个 todo 对象
				const todoObj = {id: nanoid(), title: this.title, done: false}
				// 通知 App 组件去添加一个 todo 对象
				this.addTodo(todoObj)
				// 清空输入
				this.title = ''
			}
		},
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50

MyList.vue 列表组件

<template>
	<ul class="todo-main">
		<MyItem 
			v-for="todoObj in todos"
			:key="todoObj.id" 
			:todo="todoObj" 
			:checkTodo="checkTodo"
			:deleteTodo="deleteTodo"
		/>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components: {MyItem},
		// 声明接收 App 传递过来的数据，其中 todos 是自己用的，checkTodo 和 deleteTodo 是给子组件 MyItem 用的
		props:['todos','checkTodo','deleteTodo']
	}
</script>

<style scoped>
	/*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}

	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}
</style>
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
37
38
39
40
41

MyItem.vue 列表内容组件

<template>
	<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
			<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了 props -->
			<!-- <input type="checkbox" v-model="todo.done"/> -->
			<span>{{todo.title}}</span>
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
	</li>
</template>

<script>
	export default {
		name:'MyItem',
		// 声明接收 todo、checkTodo、deleteTodo
		props:['todo','checkTodo','deleteTodo'],
		methods: {
			// 勾选 or 取消勾选
			handleCheck(id){
				// 通知 App 组件将对应的 todo 对象的 done 值取反
				this.checkTodo(id)
			},
			// 删除
			handleDelete(id){
				if(confirm('确定删除吗？')){
					// 通知 App 组件将对应的 todo 对象删除
					this.deleteTodo(id)
				}
			}
		},
	}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

MyFooter.vue 页脚组件

<template>
	<div class="todo-footer" v-show="total">
		<label>
			<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
			<input type="checkbox" v-model="isAll"/>
		</label>
		<span>
			<span>已完成{{doneTotal}}</span> / 全部{{total}}
		</span>
		<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
	</div>
</template>

<script>
	export default {
		name:'MyFooter',
		props:['todos','checkAllTodo','clearAllTodo'],
		computed: {
			// 总数
			total(){
				return this.todos.length
			},
			// 已完成数
			doneTotal(){
				// 此处使用 reduce 方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)
				},0) */
				// 简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			},
			// 控制全选框
			isAll:{
				// 全选框是否勾选
				get(){
					return this.doneTotal === this.total && this.total > 0
				},
				// isAll 被修改时 set 被调用
				set(value){
					this.checkAllTodo(value)
				}
			}
		},
		methods: {
			/* checkAll(e){
				this.checkAllTodo(e.target.checked)
			} */
			// 清空所有已完成
			clearAll(){
				this.clearAllTodo()
			}
		},
	}
</script>

<style scoped>
	/*footer*/
	.todo-footer {
		height: 40px;
		line-height: 40px;
		padding-left: 6px;
		margin-top: 5px;
	}

	.todo-footer label {
		display: inline-block;
		margin-right: 20px;
		cursor: pointer;
	}

	.todo-footer label input {
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.todo-footer button {
		float: right;
		margin-top: 5px;
	}
</style>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

# 总结

组件化编码流程：

  • 拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突
  • 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
    • 一个组件在用：放在组件自身即可
    • 一些组件在用：放在他们共同的父组件，然后通过子组件传参（状态提升）
    • 实现交互：从绑定事件开始

props 适用于：

  • 父组件与子组件通信，直接在子组件里传参 <Children :param1="param1"></Children>
  • 子组件与父组件通信，要求父先给子组件一个函数，然后子组件调用函数，把值作为参数传回去

使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的。

props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。

# webStorage

  • 存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）

  • 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制

  • 相关 API（xxxx 有两个：local 和 session）：

    1. xxxxxStorage.setItem('key', 'value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

    2. xxxxxStorage.getItem('person')：该方法接受一个键名作为参数，返回键名对应的值

    3. xxxxxStorage.removeItem('key')：该方法接受一个键名作为参数，并把该键名从存储中删除

    4. xxxxxStorage.clear()：该方法会清空存储 中的所有数据

  • 备注：

    1. sessionStorage 存储的内容会随着浏览器窗口关闭而消失
    2. localStorage 存储的内容，需要手动清除才会消失
    3. xxxxxStorage.getItem(value) 如果 value 获取不到，那么 getItem 的返回值是 null
    4. JSON.parse(null) 的结果依然是 null

# 组件的自定义事件

  • 一种组件间通信的方式，适用于：子组件 ===> 父组件

  • 使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中）

  • 绑定自定义事件：

    1. 第一种方式，直接在组件对象绑定自定义事件，假设有个 kele 事件，则在父组件中：<Demo @kele="test"/> 或 <Demo v-on:kele="test"/>

    2. 第二种方式，先使用 ref 绑定组件对象，在 mounted 里通过 $ref 获取组件对象，再使用 $on 绑定自定义组件，这样可以使用定时器等，灵活，在父组件中：

      <Demo ref="demo"/>
// ......
mounted(){
   this.$refs.demo.$on('kele',this.test)
}
      1
      2
      3
      4
      5

    3. 若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法

子组件：

  • 触发自定义事件：this.$emit('kele',数据)

  • 解绑自定义事件：

    • this.$off('kele')，单个自定义事件

    • this.$off(['kele','demo'])，解绑多个自定义事件

    • this.$off()，解绑所有的自定义事件

  • 组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符

  • 注意：通过 this.$refs.xxx.$on('kele',回调) 绑定自定义事件时，回调 要么配置在methods中，要么用箭头函数，否则 this 指向会出问题

  • 销毁了当前组件的实例，销毁后所有实例的自定义事件全都不奏效。和 $off() 效果一样

实例

App.vue

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>

		<!-- 通过父组件给子组件传递函数类型的 props 实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用 @ 或 v-on） -->
		<!-- <Student @youngkbt="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用 ref） -->
		<Student ref="student" @click.native="show"/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('youngkbt',this.getStudentName) // 绑定自定义事件
            
			this.$refs.student.$once('youngkbt',this.m1) // 绑定自定义事件（一次性）
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

School.vue 组件，利用 props 接受父组件传来的函数，然后在另一个函数调用

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="sendSchoolName">把学校名给App</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		props:['getSchoolName'],
		data() {
			return {
				name:'可乐',
				address:'深圳',
			}
		},
		methods: {
			sendSchoolName(){
				this.getSchoolName(this.name)
			}
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>
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

Student.vue 组件，如果不想在 props 获取，可以调用 $emit 主动触发绑定的事件，也可以主动解绑事件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑youngkbt事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		methods: {
			sendStudentlName(){
				// 触发 Student 组件实例身上的 youngkbt 事件
				this.$emit('youngkbt',this.name,666,888,900)
                // 触发父组件绑定的 click 事件
				this.$emit('click')
			},
			unbind(){
				this.$off('youngkbt') // 解绑一个自定义事件
				this.$off(['youngkbt','click']) // 解绑多个自定义事件
				this.$off() // 解绑所有的自定义事件
			},
			death(){
				this.$destroy() // 销毁了当前 Student 组件的实例，销毁后所有 Student 实例的自定义事件全都不奏效。
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>
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
37
38
39
40
41
42
43
44
45

# 全局事件总线

上面介绍了父子组件之间通信需要父组件提供数据或者函数给子组件来实现两者通信。

那么父孙组件如何通信呢？按照父子组件逻辑，我们只能父组件传给子组件，然后子组件再传给自己的子组件（孙组件），但是这样中间的子组件压力就大了，它明明不需要这些数据，但是「被迫」当媒介，对它效率就低了。

那么两个同级的子组件如何通信呢？按照父子组件逻辑，我们只能通过一个子组件将数据传给父组件，然后父组件再传给另一个子组件，这样也不好，父组件的压力就大了。

于是我们可以使用 全局事件总线（GlobalEventBus）。

  • 一种组件间通信的方式，适用于 任意组件间通信

  • 安装全局事件总线：

    new Vue({
	// ......
	beforeCreate() {
		Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm
	},
    // ......
})
    1
    2
    3
    4
    5
    6
    7

  • 使用事件总线：

    1. 接收数据：A 组件想接收数据，则在 A 组件中给 $bus 绑定自定义事件，事件的 回调留在 A 组件自身

      // A 组件
methods(){
  demo(data){......}
}
// ......
mounted() {
  this.$bus.$on('kele',this.demo)
}
beforeDestroy() {
    this.$bus.$off('kele')
},
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

    2. 提供数据：this.$bus.$emit('kele',数据)

  • 最好在 beforeDestroy 钩子中，用 $off 去解绑 当前组件所用到的 事件

实例

School.vue 组件，在全局事件总线绑定一个函数，叫 hello

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'可乐',
				address:'深圳',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>
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

Student.vue 组件，调用全局事件总线的 hello 函数，把数据通过参数传给绑定这个 hello 的 School 组件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>
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

# 消息订阅与发布（pubsub）

  • 一种组件间通信的方式，适用于 任意组件间通信。

  • 使用步骤：

    1. 安装 pubsub：npm i pubsub-js

    2. 哪个组件用，则这个组件引入: import pubsub from 'pubsub-js'

    3. 接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的 回调留在 A 组件自身

      <script>
    import pubsub from 'pubsub-js'
    export default {
        name:'School',
        methods(){
            demo(msgName, data)=>{
                console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data)
            }
        },
        mounted() {
            this.pubId = pubsub.subscribe('hello',this.demo) // 订阅消息
        },
        beforeDestroy() {
            pubsub.unsubscribe(this.pubId) // 取消订阅
        },
    }
</script>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17

    4. 提供数据：pubsub.publish('xxx',数据)

    5. 最好在 beforeDestroy 钩子中，用 pubSub.unsubscribe(pid) 去 取消订阅

实例

School.vue 组件订阅消息

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'School',
        data() {
            return {
                name:'可乐',
                address:'深圳',
            }
        },
        methods(){
            demo(msgName, data)=>{
                console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data)
            }
        },
        mounted() {
            this.pubId = pubsub.subscribe('hello',this.demo) // 订阅消息
        },
        beforeDestroy() {
            pubsub.unsubscribe(this.pubId) // 取消订阅
        },
    }
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>
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
37

Student.vue 组件发布消息

<template>
	<div class="student">
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		methods: {
			sendStudentName(){
				pubsub.publish('hello',666); // 发布组件
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>
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

# nextTick（新生命周期）

  • 语法：this.$nextTick(回调函数)
  • 作用：在下一次 DOM 更新结束后执行其指定的回调
  • 什么时候用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行

什么时候下一次 DOM 更新？也就是我们更改某个数据，导致页面重新渲染该新的数据，这就是一次 DOM 更新。

那么我们修改一个数据时，需要进行一些处理（以前可能用 setTimeout），那么可以在该数据重新渲染到页面上时，执行 this.$nextTick(回调函数)。

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

举个例子就是当我们点击「编辑」按钮时，可以让弹出的文本框获取焦点：

<template>
	<li>
		<label>
			<input 
				type="text" 
				v-show="isEdit"
				ref="inputTitle"
			>
		</label>
		<button @click="handleEdit()">编辑</button>
	</li>
</template>

<script>
	export default {
		name:'MyItem',
		data() {
			return {
                isEdit: false
			}
		},
		methods: {
			//编辑
			handleEdit(){
                this.isEdit = true
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
			}
		},
	}
</script>
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

# 动画

# Vue封装的过度与动画

作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名。

图示：

写法：

  • 元素进入的样式：

    1. v-enter：进入的起点
    2. v-enter-active：进入过程中
    3. v-enter-to：进入的终点

  • 元素离开的样式：

    1. v-leave：离开的起点
    2. v-leave-active：离开过程中
    3. v-leave-to：离开的终点

  • 使用 <transition> 包裹要过度的元素，并配置 name 属性：

    1. 如果配置了 name，那么所有 v-xxx-xxx 前的 v 改成配置的 name 值
    <template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow: true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	.hello-enter-active{
		animation: youngkbt 0.5s linear;
	}
	.hello-leave-active{
		animation: youngkbt 0.5s linear reverse;
	}
	@keyframes youngkbt {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>
    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
    37
    38
    39

  • 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定 key 值

    <transition-group name="hello" appear>
    <h1 v-show="!isShow" key="1">你好啊！</h1>
    <h1 v-show="isShow" key="2">可乐！</h1>
</transition-group>
    1
    2
    3
    4

# 第三方动画库

animate.css

  • 下载：npm install animate.css

  • 引入：import 'animate.css'

  • 在需要动画的标签加入属性

  • 进入时，离开时：enter-active-class 和 leave-active-class 的值自取需要的动画，官网有

    <template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">可乐！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
</style>
    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

# 脚手架配置代理

# 方法一

在 vue.config.js 中添加如下配置：

devServer:{
    proxy: "http://localhost:5000"
}
1
2
3

说明：

  • 优点：配置简单，请求资源时直接发给前端（8080）即可
  • 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
  • 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

# 方法二

编写 vue.config.js 配置具体代理规则：

module.exports = {
    devServer: {
        proxy: {
            '/api1': { // 匹配所有以 '/api1' 开头的请求路径
                target: 'http://localhost:5000', // 代理目标的基础路径
                changeOrigin: true, // 用于控制请求头中的 host 值，允许跨域
                pathRewrite: {'^/api1': ''}, // 将带有 /api1 的地址改为空，如果访问的是 http://localhost:8080/api1/admin/user，则变为  http://localhost:8080/admin/user
                // ws: true, // 用于支持 websocket
            },
            '/api2': { // 匹配所有以 '/api2' 开头的请求路径
                target: 'http://localhost:5001', // 代理目标的基础路径
                changeOrigin: true, // 用于控制请求头中的 host 值
                pathRewrite: {'^/api2': ''}
            }
        }
    }
}
/*
   changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost:5000
   changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost:8080
   changeOrigin 默认值为 true
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

假设你的端口是 8080，而服务器的端口是 5000，那么：

  • changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost:5000，因为服务器的端口是 5000，所以该请求与服务器是同一个端口，这样能让服务器误以为是「自己人」，从而达到跨域的效果
  • changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost:8080，如果服务器不允许跨域，则请求失败
  • changeOrigin 默认值为 true

说明：

  • 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
  • 缺点：配置略微繁琐，请求资源时必须加前缀

# 插槽

  • 作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件。

  • 分类：默认插槽、具名插槽、作用域插槽

使用方式：

我们在子组件写一个 <slot> </slot>，那么父组件写的的 HTML 结构，就会自动替换 slot 标签，达到传参效果。

# 默认插槽

<!-- 父组件 -->
<Category>
    <div>你好</div>
</Category>

<!-- Category 子组件 -->
<template>
	<div>
        <!-- 定义插槽 -->
        <slot>插槽默认内容</slot>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

这样渲染出来的 Category 子组件就是：

<!-- Category 子组件 -->
<template>
    <div>
    	<div>你好</div>
	</div>
</template>
1
2
3
4
5
6

所以插槽可以理解一个坑位，专门占地方，等着父组件传过来东西，当然如果父组件不传东西，那么上面的 Category 组件渲染出来是：

<!-- Category 子组件 -->
<template>
    <div>
    	插槽默认内容
	</div>
</template>
1
2
3
4
5
6

所以 slot 标签里填的是默认值，一旦父组件没有传 HTML 结构过来，就使用默认值。

# 具名插槽

如果有多个插槽，那么我们该如何识别插槽呢？

需要给 slot 标签加上一个属性：name，然后在父组件，用 v-slot 属性指定该 name 即可。

<!-- 父组件 -->
<Category>
    <!-- 旧版API，已被废弃 -->
    <template slot="center">
		<div>html结构1</div>
    </template>
    
    <!-- 新版API -->
    <template v-slot:footer>
		<div>html结构2</div>
    </template>
</Category>
<!-- Category 子组件 -->
<template>
	<div>
        <!-- 定义插槽 -->
        <slot name="center">插槽默认内容...</slot>
        <slot name="footer">插槽默认内容...</slot>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如果子组件有一个不使用 name 属性，则代表是默认插槽，即自动加上 name = 'default'

<slot>插槽默认内容...</slot>
<!-- 等价于 -->
<slot name="default">插槽默认内容...</slot>
1
2
3

所以在父组件我们可以：

<Category>
	<div>html结构1</div>
</Category>
<!-- 等价于 -->
<Category>
    <template v-slot:default>
		<div>html结构2</div>
    </template>
</Category>
1
2
3
4
5
6
7
8
9

# 作用域插槽

当父组件需要子组件的数据时，需要在子组件将数据传给 slot 标签，然后父组件再通过 slot 获取数据。

代码

<Category>
    <!-- 旧版API，已被废弃 -->
    <template slot-scope="scopeData">
        <!-- 生成的是h4标题 -->
        <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
    </template>
    
    <!-- 新版API -->
    <template v-slot="scopeData">
        <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
    </template>
</Category>

<!-- Category 子组件 -->
<template>
	<div>
    	<slot :games="games"></slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        // 数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>
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

可以看到，子组件的 games 传给 slot，然后父组件获取到 games，放到 scopeData 里（可能有多个数据，所以统一放到 scopeData 里），所以我们通过 scopeData.games 获取到子组件的 games。

scopeData 可以按照自己的喜好命名。

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定）

当然 v-slot 支持解构语法，即可以写成：

<template v-slot="{ games }"> <!-- 这样不用 scopeData.games 获取-->
    <!-- 生成的是h4标题 -->
    <h4 v-for="g in games" :key="g">{{g}}</h4>
</template>
1
2
3
4

当然也可以重新命名：

<template v-slot="{ games: gameArr }">
    <!-- 生成的是h4标题 -->
    <h4 v-for="g in gameArr" :key="g">{{g}}</h4>
</template>
1
2
3
4

以及其他的解构语法。

编辑此页 (opens new window)
#Vue
更新时间: 2024/11/02, 09:43:06
Vue2 - 生命周期
Vue2 - Vuex

← Vue2 - Vuex→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
桂ICP备2021009994号