vue单页开发父子组件传值思路详解

前端之家收集整理的这篇文章主要介绍了vue单页开发父子组件传值思路详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。

GitHub地址:nofollow" href="https://github.com/leileibrother/wechat-vue">https://github.com/leileibrother/wechat-vue

文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。

父组件引入子组件,父组件html的代码如下:

这是父组件

子组件传过来的值是 “{{childValue}}”

子组件代码如下:

1,父组件向子组件传值。

在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,

在子组件中使用props接收值,如props:['message'],接收父组件传过来的message字段,使用{{message}}就是可以使用父组件传过来的值了。

2,子组件向父组件传值。

子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。

在子组件中使用$emit()来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。

在父组件中如下,也需要这个中转站来接收值

getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。

总结

以上所述是小编给大家介绍的vue单页开发父子组件传值思路详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章