纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

猫老板的豆   2021-09-14 我要评论
想了解Vue子组件调用父组件方法案例详解的相关内容吗,猫老板的豆在本文为您仔细讲解Vue子组件调用父组件方法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue子组件调用父组件,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>


相关文章

猜您喜欢

  • 打印GC日志排查 聊聊怎样打印GC日志排查的问题

    想了解聊聊怎样打印GC日志排查的问题的相关内容吗,犀牛饲养员在本文为您仔细讲解打印GC日志排查的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:打印GC日志排查,GC日志,GC日志排查,下面大家一起来学习吧。..
  • redis原理 使用redis生成唯一编号及原理示例详解

    想了解使用redis生成唯一编号及原理示例详解的相关内容吗,IT咸鱼圈在本文为您仔细讲解redis原理的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:redis生成唯一编号,redis自增序列,redis原理,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ben10gamesx.com 【Win11软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式