发布于2022-11-19 06:45 阅读(419) 评论(0) 点赞(2) 收藏(1)
在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props
, eventbus
, vuex
等,本文主要介绍第一种方法。
子组件向父组件传值利用的是 $emit
假设我们的父组件为:
<app></app>
里面嵌套了子组件:
<app>
<child></child>
</app>
假设子组件的内容为:
<div>
<p>我是子组件</p>
<p>{{message}}</p>
<button></button>
</div>
我们想当点击按钮时将子组件中 message 的内容传递给父组件:
1. 在子组件中
为 button
绑定 click
事件
<button @click="submit()"></button>
当触发点击事件时,在函数中使用 $emit
submit () {
this.$emit('childFn',this.message)
}
其中 $emit
中的两个参数,第一个为父组件的事件,第二个为想要传的值
2. 在父组件中
在引用子组件的位置,写入事件:
<app>
<child @childFn="parentFn"></child>
</app>
在 parentFn() 函数中,写入传的参数,获取子组件中 message 的值:
parentFn (message) {
this.getMessage = message
}
这样就将子组件中的 message 值存到了父组件中的 getMessage 中了。
父组件向子组件传值利用的是 props
假设我们的父组件为:
<app></app>
里面嵌套了子组件:
<app>
<child></child>
</app>
假设子组件的内容为:
<div>
<p>我是子组件</p>
<p>{{childMessage}}</p>
<button></button>
</div>
我们想将从父组件中获取的内容放置在message的位置上:
1. 在子组件中
增加 props
:
export default {
props: ['childMessage'],
data () {
return {
...
}
}
2. 在父组件中
为嵌套的子组件绑定传的值:
<app>
<child :childMessage="parentMessage"></child>
</app>
其中,parentMessage为父组件中 data 里的值:
export default {
data () {
return {
parentMessage: '我是来自父组件的值'
}
}
以上,就可以将父组件中 parentMessage中的值传递给子组件childMessage中,并显示在 {{childMessage}}的位置上。
纯手写,如有不对请指出哦~
作者:92wwhehjw
链接:http://www.qianduanheidong.com/blog/article/455505/5ca5834e4858e8c387ac/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!