码迷,mamicode.com
首页 > 其他好文 > 详细

vue(三)-父子组件通信

时间:2018-04-18 14:24:40      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:图片   16px   def   bubuko   wrong   tps   之间   作者   来讲   

原因 :  Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

 

props  父组件给子组件传递数据

props:作用是父组件给子组件传递数据。

语法:参考《vue(二)-父子组件语法》。

注意要点:

1:  子组件要显式声明需要哪些数据。语法:

props{

item:{

default(){

return 

}

}
}

2:从父组件用props传进来的数据,一般不要改动,因为改动之后,父组件中数据也变了,但是(敲黑板),好像vue新版本已经修改了这个。没有验证,请谨慎修改。

3:父组件在使用子组件时候,要用v-bind来绑定数据(下图)。将子组件的items绑定到父组件的item数据中。

技术分享图片

$emit  子组件给父组件传递数据 参考文档https://cn.vuejs.org/v2/api/#vm-emit

语法:

技术分享图片

子组件中写法:

html:使用click调用submit方法。

技术分享图片

js:在submit方法中,使用$emit来讲this.items数据,传递给transferSubmit方法,这是一个自定义的方法。

技术分享图片

父组件中写法:

html: 使用transferSubmit方法,调用getItems方法。

技术分享图片

js:getItems中参数,就是从子组件中传进来的。

 技术分享图片

子组件给子组件传递数据

vue没有直接自对子传数据的方法。可以参考vue提供的Vuex。

 

参考文章:http://www.cnblogs.com/wisewrong/p/6266038.html  作者:WiseWrong

vue(三)-父子组件通信

标签:图片   16px   def   bubuko   wrong   tps   之间   作者   来讲   

原文地址:https://www.cnblogs.com/yadiblogs/p/8874296.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!