uniapp + Vue子组件向父组件传值

子组件传值解析

最新推荐文章于 2025-09-29 18:22:48 发布

原创最新推荐文章于 2025-09-29 18:22:48 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

uniapp 同时被 2 个专栏收录

22 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文详细解析了在Vue中如何实现子组件向父组件传递数据的过程。通过具体代码示例，展示了子组件如何通过事件监听的方式，将自身的状态或数据传递给父组件，并在父组件中如何接收和处理这些数据。

子组件

<view class="dropDown-item" v-for="(item,index) in comState" :key="index" @tap="changeCurrentState(item)">
	<text>{{item}}</text>
</view>

changeCurrentState(val) {
	// 向父组件传值
	this.$emit('state',val);
},

父页使用子组件

<view class="dropdown-module">
	<dropdown @state="changeState"></dropdown>
</view>

@后面的就是子组件向父组件传递的方法名。

//引入子组件
import dropdown from "../components/drop-down/dropDown.vue"
export default {
	components: {
		//注册子组件
		dropdown
	},
	methods:{
		//data的值就是子组件传递过来的值
		changeState(data){
			console.log(data);
		}
	}
}