Vue的子传父

利用props传递函数实现

原理：将回调函数通过props传到子组件中，在合适地方调用

<!-- 父组件 -->
<template>
	<div>
		<Child :show="show"></Child>
	</div>
</template>
<script>
	export default {
		methods: {
			show(value) {
				console.log('子组件调用了父组件的show方法，携带的参数为：' + value)
			}
		}
	}
</script>

<!-- Child子组件 -->
<template>
	<div>
		<button @click="send()">点击给父组件传递数据</button>
	</div>
</template>
<script>
	export default {
		props: ['show'],
		methods: {
			send() {
				this.show(123);
			}
		}
	}
</script>

利用自定义事件实现

原理：将自定义事件绑定在子组件上，在子组件中调用$emit方法，并携带参数，触发该自定义事件，从而获取参数。

<!-- 父组件 -->
<template>
	<div>
		<!-- 第一种绑定自定义事件方式：直接绑定在子组件上 -->
		<Child @zidingyiEvent="getValue"></Child>
		<!-- 第二种绑定自定义事件方式：利用$on方法 -->
		<Child ref="child"></Child>
	</div>
<template>
<script>
	export default {
		methods: {
			getValue(value, ...args) {
				console.log('子组件给父组件传的值为：' + value + ',' + args);
			}
		},
		mounted() {
			this.$refs.child.$on('zidingyiEvent', this.getValue);
		}
	}
</script>

<!-- 子组件child -->
<template>
	<div>
		<button @click="send()">点击给父组件传递数据</button>
		<button @click="unbind()">解绑自定义事件</button>	
	</div>
</template>
<script>
	export default {
		data() {
			name: 'wuwu'
		},
		methods: {
			send() {
				this.$emit('zidingyiEvent', this.name, 1, 2, 'a');
			},
			unbind() {
				this.$off(); // 解绑所有自定义事件
				this.$off('zidingyiEvent'); // 解绑单一自定义事件
				this.$off(['zidingyiEvent', 'otherEvent']); // 解绑多个自定义事件
			}
		}
	}
</script>