vue脚手架项目流程(二)父子组件传值

1.父组件传递给子组件

父子组件之间的联系就是父组件里有子组件的容器,所以要在这个容器上下功夫






父组件里传递要在子组件里接收,通过属性传值也要通过属性接收,也就是props






在浏览器里运行就是这样

vue脚手架项目流程(二)父子组件传值_第1张图片     进入到子组件         vue脚手架项目流程(二)父子组件传值_第2张图片

2.子组件传递给父组件

子传父主要是利用$emit 底层  继承EventEmitter类原型的emit方法来进行传值的

子组件也就是那个容器标签绑定自定义事件,子组件内部通过 $emit 进行数据推送,父组件内部通过自定义事件调用的函数
参数接收传递的数据。

子组件传值

父组件里接收 

子组件数据{{child}}

 

vue脚手架项目流程(二)父子组件传值_第3张图片此时子组件还没有挂载,因此没有数值传递过来,点击点入main界面子组件开始挂载

vue脚手架项目流程(二)父子组件传值_第4张图片  子组件挂载好之后,传递数值,父组件进行接收并展示

你可能感兴趣的:(vue,父子组件传值)