vuecli2.0值传递总结

一.组件间的数据传递

1.父子组件

在一个组件内定义另一个组件,称为父子组件

子组件只能在父组件内部使用

默认情况下,子组件无法访问父组件中的数据,每个组件实例的作用域是独立的。

 

2.组件间数据传递(通信)

2.1子组件访问父组件的数据。

a.在调用子组件时,绑定想要获取的父组件中的数据

b.在子组件内部,使用props选项声明获取的数据,及接受来自父组件的数据。

总结:父组件通过props向下传递数据给子组件。

注:组件中的数据共有三种形式:data,props,computed

 

2.2 父组件访问子组件的数据

a.在子组件中使用vm.$emit(事件名,数据)触发一个自定义的事件,事件名自定义。

b.父组件在使用子组件的地方监听子组件触发的事件,并在父组件中定义方法,用来获取数据。

总结,子组件通过events给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。

 

对应的截图如下:

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章