Vue父组件向子组件传递参数

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Header.vue
│ │ └── Home.vue

App.vue

Header.vue

Home.vue

五 运行

npm run dev

image.png

六 总结

1 父组件向子组件传递参数
《1 父组件调用子组件，绑定动态，或静态属性

《2 子组件在props接收从父组件传过来的参数，可以传递变量，函数，对象
export default {
data(){
return{
msg:'subcomponents msg!'
}
}
props:{
"title":String,
"run":Function,
"home":Object
}
}
《3 在子组件使用
i am header components! -- {{title}} --
run parent component function

注意：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

七 参考

https://cn.vuejs.org/v2/guide/components-props.html