vue父子组件之间传值

最新推荐文章于 2024-09-30 16:19:08 发布

子曰 .

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量146

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43787161/article/details/128624932

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

文章详细描述了在Vue.js框架下，如何进行父子组件之间的数据传递。父组件通过props向子组件传递值，使用$refs调用子组件方法。子组件则通过$emit触发父组件的方法来传递值回去。同时，子组件使用watch监听props的变化。

摘要由CSDN通过智能技术生成

一、父组件向子组件传值

父组件

<el-col :span="24">
	<el-form-item label="关联项目：" prop="methodOptionId">
		<xxmessage ref="xxmessage" :messages="messages" @setUpdate="setUpdate"></xxmessage>
	</el-form-item>
</el-col>

import xxmessage from './xxmessage1'
export default {
	name: 'userAddorUpdata',
	components: {
		xxmessage
	},
	data:{
		return:{messages:{val:1}}
	},
	methods:{
		handle(val){
			this.$refs.xxmessage.init(val)；//父组件调用子组件的方法
		}
	}
}

子组件

export default {
	components: {
		exit
	},
	props: ['messages'],//接收父组件传过来的值
	watch: {//监听messages的变化
		messages: {
			handler(newVal, oldVal) {
				console.log(newVal, oldVal)
			},
			deep: true,
			immediate: true
		}
	},
	data(){return{}},
	methods:{
		init(val){
			console.log(val)
		}
	}
}

二、子组件向父组件传值

父组件

<el-col :span="24">
	<el-form-item label="关联项目：" prop="methodOptionId">
		<xxmessage ref="xxmessage" :messages="messages" @setUpdate="setUpdate"></xxmessage>
	</el-form-item>
</el-col>

import xxmessage from './xxmessage1'
export default {
	name: 'userAddorUpdata',
	components: {
		xxmessage
	},
	data:{
		return:{messages:{val:1}}
	},
	methods:{
		setUpdate(val){
			console.log(val)//子组件传过来的值
		}
	}
}

子组件

export default {
	props: ['messages'],//接收父组件传过来的值
	watch: {//监听messages的变化
		messages: {
			handler(newVal, oldVal) {
				console.log(newVal, oldVal)
			},
			deep: true,
			immediate: true
		}
	},
	data(){return{}},
	methods:{
		init(val){
			console.log(val)
		},
		handleParse(){
			let val={val:123}
			this.$emit('setUpdate',val)//调用父组件的方法传值
		}
	}
}