Vue组件之间是有联系的,避免不了组件之间要互相传值,
父给子使用v-bind绑定自定义属性和使用props来接受
子给父使用@自定义事件='函数' this.$emit('自定义事件','要发送的内容'),子组件通过$emit来触发父组件的函数来实现
但是两个同级组件之间这么互相传值

<div id='app'>
	<children1></children1>
	<children2></children2>
</div>
<script>
 	var children1 = {};
 	var children2 = {};
	var vm = new Vue({
		el:'#app',
		components:{
			children1,
			children2
		}
	})
</script>

现在要将children1组件中的数据传给children2组件
主要使用到vue实例中的$on()和$emit()

	<div id='app'>
		<children1></children1>
		<children2></children2>
	</div>
	<script>
	    var Event = new Vue({}); // 创建一个vue实例用来作为传值的媒介
	 	var children1 = {
			template:`
				<div>
					<button @click='send'>点我给children2组件发送数据</button>
				</div>
			`,
			data(){
				return {
					msg:'我是要给children2发送的数据'
				}
			},
			methods:{
				send(){ 
					Event.$emit('go',this.msg) 
				}
			}
		};
	 	var children2 = {
			template:`
				<div>
					<h2>从children1组件接收到的值:{{msg1}}</h2>		
				</div>
			`,
			data(){
				return{
					msg1:''
				}
			},
			created(){
				Event.$on('go',(v) => { // 必须使用箭头函数因为this
					this.msg1 = v;
				})
			}
		};
		var vm = new Vue({
			el:'#app',
			components:{
				children1,
				children2
			}
		})
</script>

在这里插入图片描述
chilren1组件要发送数据使用的是Event.$emit()
chilren2组件要接收数据使用Eevent.$on()

Logo

前往低代码交流专区

更多推荐