vuecli2.0值传递总结

一.组件间的数据传递

1.父子组件

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

 

对应的截图如下：