这篇文章主要介绍了vue中父子组件的参数传递和应用示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
1.在父组件中调用子组件，父亲传值给子组件
子组件如下，把要传给给父亲的值放在props中
template> <!--底部导航--><div class="index-bbar"> <ul class="flex"> <li> <span class="flex alignc flexdc"> <span>{{item.title}}</span></span></li></ul></div> @import "../../assets/public/css/top.css"; @import "../../assets/public/css/bottom.css";
父组件的调用的三部曲
首先引入子组件
import Bottom from '@/components/public/Bottom';
注入组件在components中注入
components: {Bottom}
在父亲中应用
到这里就结束了，是不是贼快
2.子组件传值给父组件
父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。
<!-- 父组件 --> <div class="test"> <br /> 子组件传来的值 : {{message}} </div>
子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件
<!-- 子组件 --> <div class="testCom"> <a style="color:transparent">本文来源gao($daima.com搞@代@#码(网5</a><button>Send</button></div>
在子组件向父亲传值的时候，不可用router-link,不然接受不到父亲定义的函数
以上就是vue中父子组件的参数传递和应用示例的详细内容，更多关于vue中父子组件的参数传递的资料请关注gaodaima搞代码网其它相关文章！
以上就是vue中父子组件的参数传递和应用示例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue中父子组件的参数传递和应用示例
转载请注明原文链接：vue中父子组件的参数传递和应用示例
