VUE兄弟组件方法调用及传参

最新推荐文章于 2024-10-10 17:12:17 发布

Colossus丶

最新推荐文章于 2024-10-10 17:12:17 发布

阅读量238

点赞数

分类专栏： Vue 文章标签： javascript vue.js html

本文链接：https://blog.youkuaiyun.com/qq_40472157/article/details/120458017

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue中使用$refs进行父子组件间的交互，展示了通过$refs调用子组件方法和child-two组件通过$emit触发父组件更新的方法。案例涉及child-one的input onchange事件和child-two的button click事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
	<div>
		<child-one ref = 'chiledOne'/>
		<child-two @updateFun='update'/>
	</div>
<template>
<script>
	methods:{
		update(){
		$refs.childOne.doUp()
		}
	}
</script>

child-one组件

<template>
	<div>
		<input @οnchange='doUp' />
	</div>
<template>
<script>
	methods:{
		doUp(obj){
			console.log(obj)
		}
	}
</script>

child-two组件

<template>
	<div>
		<button @click='upFun(777)'></button>
	</div>
<template>
<script>
	methods:{
		upFun(obj){
			this.$emit.updateFun(obj)
		}
	}
</script>