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

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

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

github地址：https://github.com/leileibrother/wechat-vue

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

父组件引入子组件，父组件html的代码如下：

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

&http://lt;/template>

子组件代码如下：

我是子组件，父组件穿传过来的值是{{message}}

点击向父组件传值

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

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

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

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

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

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

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

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

总结

以上所述是给大家介绍的vue单页开发父子组件传值思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。