VUE组件之间的通信,父组件怎么向子组件传递数据

本文介绍了Vue中组件间的通信方式,包括父组件如何通过属性(props)向子组件传递数据,子组件如何通过自定义事件向父组件发送数据,以及兄弟组件间通信的常见策略。通过掌握这些通信方法,能提升Vue开发效率和代码可维护性。
摘要由CSDN通过智能技术生成

学习VUE肯定离不开组件,利用组件又肯定丢不了组件之间的通信。掌握了组件之间的通信,能够大大提高我们的开发效率,使用起组件来也会如鱼得水。

组件之间的通信就好比我们人与人之间的沟通一样。那组件之间可不可以不通信呢?

答案是:可以的。

一个简单的静态页,我们可以写成一个组件,哪里需要,直接调用就可以了。比如:

//子组件
<div>
hello world!
</div>

//父组件调用
<Hello />

组件主要是用来解决重复的问题。当我们页面有多个结构和元素类似的地方,我们就可以写成一个组件,这样,可维护性很高。

当然,你也可以不用组件,只是,维护成本会很高。

被调用的组件一般称为子组件,调用子组件的通常称为父组件。
调用子组件的可以是页面,也可以是组件。就是组件里面也可以调用组件。

我们实际应用组件的时候,一般子组件里的数据是可变的。这样,就不得不用到组件之间的通信了。比如,上面的例子,我想让不同的父组件调用子组件的时候,显示不同的名字。父组件就要告诉子组件,名字是什么。这有点像我们调用函数时候的参数或者我们调用后台接口时候的参数。改造一下上面的例子。


//子组件
<div>
hello {
   {
   name}}!
</div>

<script>
export default 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值