0
点赞
收藏
分享

微信扫一扫

springboot+vue教师人事档案管理系统(源码+文档)

浮游图灵 2023-05-04 阅读 108

文章目录

1.父组件 传值 子组件

父组件:
		<Header :msg='msg'></Header>
子组件:
	props:['msg']
	或 props:{ msg:数据类型 }
  • 父组件Home.vue
<template>
	<div>
		父组件
		<Header :msg='msg'></Header>
	</div>
</template>

<script type="text/javascript">
import Header from './Header'
export default {
	data () {
		return {
			msg:'这是数据'
		}
	},
	components:{
		Header
	}
}	
</script>
  • 子组件Header.vue
<template>
	<div>
		子组件
		<hr />
		{{msg}}
	</div>
</template>

<script type="text/javascript">
export default {
	//props:['msg']
	props:{
		msg:String
	}
}
</script>

2.子组件 传值 父组件

子组件:
	this.$emit("自定义事件名称",要传的数据);
父组件:
	<Header @childInput='getVal'></Header>
	methods:{
		getVal(msg){
			//msg就是,子组件传递的数据
		}
	}
  • 父组件Home.vue
<template>
	<div>
		父  {{msgVal}}  组件
		<Header @childInput='getVal'></Header>
	</div>
</template>

<script type="text/javascript">
import Header from './Header'
export default {
	data () {
		return {
			msgVal:''
		}
	},
	components:{
		Header
	},
	methods:{
		getVal(msg){
			this.msgVal = msg;
		}
	}
}	
</script>
  • 子组件Header.vue
<template>
	<div>
		子组件
		<input type="" name="" v-model='changeVal'>
	</div>
</template>

<script type="text/javascript">
export default {
	data () {
		return {
			changeVal:''
		}
	},
	watch:{
		changeVal(){
			this.$emit("childInput",this.changeVal);
		}
	}
}
</script>

3.兄弟组件之间的传值

通过一个中转(bus)

A兄弟传值:
import bus from '@/common/bus'
bus.$emit("toFooter",this.msg);

B兄弟接收:
import bus from '@/common/bus'
bus.$on('toFooter',(data)=>{
	//data是this.msg数据
})
  • 父组件Home.vue
<template>
	<div>	
		<Header></Header>
		<Footer></Footer>
	</div>
</template>

<script type="text/javascript">
import Header from './Header'
import Footer from './Footer'
export default {
	components:{
		Header,
		Footer
	}
}	
</script>
  • 子组件Header.vue
<template>
	<div>
		header
		<button @click='goFooter'>传过去了</button>
	</div>
</template>

<script type="text/javascript">
import bus from '@/common/bus'
export default {
	data () {
		return {
			msg:"这是兄弟数据"
		}
	},
	methods:{
		goFooter(){
			bus.$emit("toFooter",this.msg);
		}
	}
}
</script>
  • 子组件Footer.vue
<template>
	<div>
		footer
		{{str}}
	</div>
</template>

<script type="text/javascript">
import bus from '@/common/bus'
export default {
	data () {
		return {
			str:''
		}
	},
	mounted(){
		bus.$on('toFooter',(data)=>{
			this.str=data;
		})
	}
}
</script>
举报

相关推荐

0 条评论