Vue组件间的通信

前言:本文主要介绍在Vue中组件与组件如何进行信息传递。分为三部分:

父组件向子组件

子组件向父组件

非父子组件通信

一、父组件向子组件通信(props)

①、父组件向子组件传递字符串

<template>
    <div id="m-dialog">
        <!-- 
        该种方法“只能传递字符串”,
        将child的data中的value = "str";不需要父组件data中有数据
        -->
        <child value="传递固定字符串"></child>
    </div>
</template>

Vue.component("child", {
	// 获取value的依赖
	props:["value"],
	template: '<span>{{ value }}</span>'
});
new Vue({
	// 这里的el可视为父组件
	// 所以下面这个片段是放在#m-dialog里面的
	el:"#m-dialog"
});

②、父组件向子组件 传递数据

<div id="m-dialog">
<!-- 
将组件的数据state与父组件的数据flag绑定在了一起
执行 vue1.flag= false 会对组件数据进行重新渲染
 -->
	<child v-bind:state="flag"></child>
</div>
Vue.component("child", {
	// 获取value的依赖
	props:["state"],
	template: '<span>{{ state }}</span>'
});
var vue1 = new Vue({
	// 这里的el可视为父组件
	// 所以下面这个片段是放在#m-dialog里面的
	el:"#m-dialog",
	data: {
		flag: true
	}
});
使用props传递值的时候可能有多个参数,这时候需要注意顺序问题

详情请点击

二、子组件向父组件通信($emit())
因为父子组件的数据绑定是单向,故子组件的数据变化不会影响到父组件,故需要通过事件的监听来主动通知父组件对应子组件的数据变化

<div id="m-dialog">
	<!-- 
	v-on:cancle="other"表示如果触发组件中的cancle事件
	则连带触发父组件中的other时间
 	-->
	<child v-on:cancle="other"></child>
</div>
Vue.component("child", {
	template: '<button v-on:click="cancle">我是按钮,点我触发父组件事件</button>',
	methods: {
		cancle: function() {
			// 与父组件通信一定要加上这句话
			this.$emit('cancle');
		}
	}
});
var vue1 = new Vue({
	// 这里的el可视为父组件
	// 所以下面这个片段是放在#m-dialog里面的
	el:"#m-dialog",
	data: {
		flag: true
	},
	methods: {
		other: function() {
			alert();
		}
	}
});

三、非父子组件通讯

// 建立一个空容器
var bus = new Vue()

// 在组件 B 创建的钩子中监听事件
// $on用于监听事件
bus.$on('event', function (id1,id2) {
  // ...
  alert(a);// 弹出1
  alert(a);// 弹出2
})

// 触发组件 A 中的事件
// 触发了event事件, 后面为参数
bus.$emit('event', 1, 2);

如果是比较庞大的组件间通讯可以使用 vuex,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex
友情推荐:Vue 进阶教程之:非父子组件通信方法(非Vuex) 传送门

瞎谈:刚接触vue,学习的东西很多,如有错误,敬请提醒,共同进步~~


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值