怎么在vue中实现父子组件的参数传递 - 行业资讯 - 肥雀云

　　介绍

怎么在vue中实现父子组件的参数传递?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1。在父组件中调用子组件,父亲传值给子组件

子组件如下,把要传给给父亲的值放在道具中

template> 　　& lt;才能!——底部导航——比; 　　& lt;才能div 类=癷ndex-bbar"比; 　　,,,& lt; ul 类=癴lex",在　　,,,,,& lt; li v=?项目、索引),拷贝liAry",:类=爸甘?=licurrent ? & # 39;活跃# 39;:& # 39;& # 39;“比; 　　,,,,,,& lt; router-link :=癷tem.linkURl"比; 　　,,,,,,,& lt; span 类=癴lex alignc flexdc"比; 　　,,,,,,,,,& lt; img : src=https://www.yisu.com/zixun/敝甘?=licurrent ?需要(“. ./. ./? item.urlActive):要求(“. ./. ./' + item.url) img1“类=> {{item.title}} 　　　　　　李　　　　

脚本　　出口默认{ 　　名称:“底”, 　　数据(){ 　　返回{ 　　　　} 　　}, 　　道具:“liAry”、“licurrent”, 　　方法:{ 　　　　} 　　}> 　　@ import“. ./. ./资产/公共/css/top.css”; 　　@ import“. ./. ./资产/公共/css/bottom.css”; 　　

父组件的调用的三部曲

首先引入子组件

import Bottom 得到& # 39;@/组件/公共/底# 39;;

注入组件在组件中注入

组件:,{底部}

在父亲中应用

& lt; template> 　　& lt; Bottom v-bind: liAry=& # 39; lidata& # 39;, v-bind: licurrent=& # 39; guidecurrent& # 39;祝辞& lt;/Bottom> 　　& lt;/template>

到这里就结束了,是不是贼快

2。子组件传值给父组件

父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的消息值。

& lt; !——,父组件,——比; 　　& lt; template> 　　& lt;才能div 类=皌est"比; 　　,,& lt; test-com @childFn=皃arentFn"祝辞& lt;/test-com> 　　,,& lt; br/祝辞, 　　,,子组件传来的值,,,{{消息}} 　　& lt;才能/div> 　　& lt;/template> 　　　　& lt; script> 　　export default {//,才能…… 　　,,数据:{ 　　,,,的信息:,& # 39;& # 39; 　　,,}, 　　方法:才能,{ 　　,,,parentFn(载荷),{ 　　,,,this.message =,有效载荷; 　　,,} 　　,,} 　　} 　　& lt;/script>

子组件是一个buttton按钮,并为其添加了一个点击事件,当点击的时候使用排放()美元触发事件,把消息传给父组件

& lt; !——,子组件,——比; 　　& lt; template>, 　　& lt; div 类=皌estCom"祝辞　　& lt;才能input 类型=皌ext", v模型=癿essage",/比; 　　& lt;才能button @click=癱lick"祝辞Send 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　export default {//,才能…… 　　数据才能(),{ 　　,,,return { 　　,,,,//,默认　　,,,,的信息:,& # 39;我是来自子组件的消息& # 39; 　　,,,} 　　,,}, 　　方法:才能,{ 　　,,单击(),{ 　　,,,,,,美元发出(& # 39;childFn& # 39;,, this.message); 　　,,,} 　　,,}, 　　} 　　& lt;/script>

在子组件向父亲传值的时候,不可用router-link,不然接受不到父亲定义的函数

看完上述内容,你们掌握怎么在vue中实现父子组件的参数传递的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!