vue的父传子,子传父,非父子之间的传值

VUE常用的三种传值方式
1.父传子
2.子传父
3.非父子传值

父子之间的传值
在vue.js中,父子组件之间的关系可以理解为props down(父传子props) events up(子传父用事件),如图所以:在这里插入图片描述
想要搞明白父传子,必须了解prop:
什么是prop
Prop是用来传递数据的一种自定义属性。
Prop是单向数据流。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

1.父传子:

首先你得建立两个 vue组件,假定一个是father,另一个是child
在father组件里写:
在这里插入图片描述

在child组件里写:
在这里插入图片描述
把子组件引进到父组件里面
在这里插入图片描述
记住,引进来之后就注册,在父组件里面注册
在这里插入图片描述
在这里插入图片描述
然后开始绑定数据, 父组件里data写name(name是自定义的)
在这里插入图片描述
data数据里的name,要和上面child自定义标签传递的值要对应上
在这里插入图片描述
最后在子组件里面用 props 方法承接你要传给子组件的数据
在这里插入图片描述
在上面的模板中运用传递来的参数
在这里插入图片描述
到这里父传子的通信已经写完了,下面附上整个代码:
父组件整体的代码:
在这里插入图片描述
子组件的整体代码
在这里插入图片描述

2. 子传父

子传父需要用事件来传值

首先我们就在子组件里面添加点击事件
在这里插入图片描述
在这里插入图片描述
然后我们在父组件里用 v-on 来接手子组件传递的值,v-on可简写成@
在这里插入图片描述
接着在父组件的下面的methods方法里写:
在这里插入图片描述
写到这里子传父就实现,但有的同学会发现父传子就不能实现了,这时我们可以用 watch 来监听,
在父组件里监听子组件里传递过来的值:
在这里插入图片描述
此时父子组件的通信就完成了,子传父还是父传子都可以了。
下面附上子传父的完整代码
子组件里的完整代码:
在这里插入图片描述
父组件里的完整代码:
在这里插入图片描述

3.非父子之间传值(兄弟传值)

非父子之间的传值要有一个公共的父组件,非父子之间的传值就要在这个公共的父组件里面实现传值。 非父子之间的传值还要一个公共的仓库文件(bus.js)
首先创建一个bus.js的文件,
在bus.js里面写:
在这里插入图片描述
在公共的父组件里导入两个兄弟组件并注册:
先导入:
在这里插入图片描述
在注册:
在这里插入图片描述
千万不要忘了还要自定义这两个兄弟组件标签(自定义标签在template>div中)
在这里插入图片描述
最后再附上两个兄弟组件里面的完整代码:
brother1
在这里插入图片描述
brother2
在这里插入图片描述

以上三种vue之间的通信方式就写完了。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值