Vue子组件调用父组件方法案例详解

160 阅读 0 评论 106 点赞

我是靠谱客的博主落寞高山，最近开发中收集的这篇文章主要介绍Vue子组件调用父组件方法案例详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、直接在子组件中通过this.$parent.event来调用父组件的方法

<!-- 父组件 -->
<template>
	<div>
		<child></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('测试');
		}
	}
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

二、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

<!-- 父组件 -->
<template>
	<div>
		<child @fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('测试');
		}
	}
};
</script>

<!-- 子组件 -->
<template>
	<div>
		<button @click="childMethod()">点击</button>
	</div>
</template>
<script>
export default {
	methods: {
		childMethod () {
			this.$emit('fatherMethod');
		}
	}
};
</script>

三、父组件把方法传入子组件中，在子组件里直接调用这个方法

<!-- 父组件 -->
<template>
	<div>
		<child :fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('测试');
		}
	}
};
</script>

<!-- 子组件 -->
<template>
	<div>
		<button @click="childMethod()">点击</button>
	</div>
</template>
<script>
export default {
	props: {
		fatherMethod: {
			type: Function,
			default: null
		}
	},
	methods: {
		childMethod () {
			if (this.fatherMethod) {
				this.fatherMethod();
			}
		}
	}
};
</script>

到此这篇关于Vue子组件调用父组件方法案例详解的文章就介绍到这了,更多相关Vue子组件调用父组件方法内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！