Vue组件间传值的几种方式（详细描述）

Vue组件间传值的几种方式 1. 使用v-bind和props的组合实现父向子传值2. 使用$emit和v-on的组合实现子向父传值3. \$refs、\$parent、\$children、\$root3.1 $refs3.2 $parent3.3 $children3.4 $root

1. 使用v-bind和props的组合实现父向子传值

在父组件可以通过"v-bind:参数名"或者":参数名"的形式传递参数，参数值可以为任何数据类型，并且在子组件中不能更改父组件传递过来的数据。

<template>
	<level1 :test="1" :temp="'abc'">level1>
template>

在子组件使用props接收父组件传递过来的参数 props官方说明

props可以分为数组和对象两种形式实现

props数组的形式更加的简洁，但是不推荐使用数组的形式

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: ['test', 'temp'],
		mounted() {
			console.log(this.test, this.temp)
		}
	}
</script>

结果输出

props对象的形式，有很多可选的参数可以搭配，定制型更高

最基本的对象形式，只规定数据类型

<script>
	export default {
		data() {
			return {
				data: ''
			}
		},
		props: {
			test: Number,
			temp: String
		},
		mounted() {
			console.log(this.test, this.temp)
		}
	}
</script>

结果也是正常的输出

当数据类型不符合要求时，会产生警告，但程序也会正常执行
比如将temp类型改为Number，就会产生提示你类型检查失败

而更复杂的参数类型则需要对象嵌套

主要可配置的参数有四个：
type：设置参数类型
default：设置默认值（对象或数组默认值必须从一个工厂函数获取）
required：设置必传（设置true则此参数必传）
validator：设置自定义验证器，只有验证器返回true才可以通过校验

<template>
	<level1 :extra="'abc'">level1>
template>

<script>
	export default {
		data() {
			return {
				data: ''
			}
		},
		props: {
			test: {
				type: Number, //设置数据类型
				default: 123 //设置默认值
			},
			load: {
				type: Array,
				default: () => {
					return []
				} // 对象或数组默认值必须从一个工厂函数获取（官方原话）
			},
			temp: {
				type: [String, Number], //设置多种数据类型
				required: true //设置必传
			},
			extra: {
				validator: (e) => {
					return [1, 2, 3].includes(e)
				} // 验证器 只有验证器返回true才可以通过校验
			}
		},
		mounted() {
			console.log(this.test, this.load, this.temp, this.extra)
		}
	}
</script>

2. 使用$emit和v-on的组合实现子向父传值

this.$emit( event, arg ) //触发当前实例上的事件
v-on:( event, fn );//监听event事件后运行 fn
官方文档

<!-- 子组件执行this.$emit -->
<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.testClick()
		},
		methods: {
			testClick() {
				// 触发当前实例上的事件。附加参数都会传给监听器回调。
				this.$emit('testCallback', [1, 2, 3, 4, 5])
			}
		}
	}
</script>

<!-- 父组件接收this.$emit传来的自定义事件和值 -->
<template>
	<!-- 绑定自定义事件方法 -->
	<level1 @testCallback="receiveCall"></level1>
</template>
<script>
	import level1 from './level1Linkage.vue'
	export default {
		data() {
			return {

			}
		},
		components: {
			level1
		},
		methods: {
			receiveCall(e) {
				console.log('接收到值了', e)
			}
		}
	}
</script>
<style></style>

运行结果

3. $refs、$parent、$children、$root 3.1 $refs

$refs是一个对象，对象中包含的内容是经ref注册过的组件或DOM实例。refs 不是响应式的，不应该使用它在模板中做数据绑定。

ref是一个特殊的attribute，被用来给元素或子组件注册引用信息，需要注意的是在初始渲染的时候你不能访问它们，因为ref是作为渲染结果而出现的。

我们可以通过$refs找到组件对应的实例，并直接修改他们的数据或调用他们的方法 官网文档

<!-- 子组件 -->
<script>
	export default {
		data() {
			return {
				testValue: '原始数据'
			}
		},
		props: {

		},
		mounted() {
			console.log(this.testValue)
		},
		methods: {
			testRefChange() {
				console.log(this.testValue)
			}
		}
	}
</script>

<!-- 父组件 -->
<template>
	<!-- 给组件设置ref属性 -->
	<level1 ref="level"></level1>
</template>
<script>
	import level1 from './level1Linkage.vue'
	export default {
		data() {
			return {
			}
		},
		components: {
			level1
		},
		mounted() {
			setTimeout(() => {
				console.log('延时相应啦')
				this.$refs.level.testValue = '新的数据'
				this.$refs.level.testRefChange()
			}, 3000)
		},
		methods: {
		}
	}
</script>

运行结果

3.2 $parent

$parent指向当前组件的父组件，如果当前组件有父组件的话。官方文档

3.3 $children

当前组件的直接子组件，$children 并不保证顺序，也不是响应式的。不推荐使用本方法。

3.4 $root

当前组件树的根组件。如果当前实例没有父实例，此实例将会是其自己。
持续更新···