一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 修改代码
要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Header.vue
│ │ └── Home.vue
App.vue
<template>
<div id="app">
<v-home></v-home>
<hr>
</div>
</template>
<script>
/*
import components
Local Registration components
use in template
*/
import Home from './components/Home.vue';
export default {
name: "app",
data() {
return {
msg:'hello vue world!',
};
},
components:{
'v-home':Home
},
};
</script>
<style>
</style>
Header.vue
<template>
<div>
<h2>
i am header components! -- {{title}} --
</h2>
<button @click="run('123')">run parent component function</button>
<br>
<hr>
<button @click="localFunctionCallParentFunction()">local function call parent component function</button>
<br>
<hr>
</div>
</template>
<script>
export default {
data(){
return{
msg:'subcomponents msg!'
}
},
methods:{
localFunctionCallParentFunction(){
console.log(this.home.title)
this.home.run('456');
}
},
props:{
"title":String,
"run":Function,
"home":Object
}
}
</script>
Home.vue
<template>
<!-- all content need in root-->
<div id="home">
<v-header :title="title" :run="run" :home="this"></v-header>
{{msg}}
</div>
</template>
<script>
import Header from './Header.vue'
export default {
data(){
return {
msg:'i am home component!',
title:"HomePage title in Home.vue"
}
},
components:{
'v-header': Header
},
methods:{
run(msg){
console.log("i am a function from Home components" + msg)
}
}
}
</script>
<style>
#home h2{
color: red;
}
</style>
五 运行
npm run dev
image.png
六 总结
1 父组件向子组件传递参数
《1 父组件调用子组件，绑定动态，或静态属性
<v-header :title="title" :run="run" :home="this"></v-header>
《2 子组件在props接收从父组件传过来的参数，可以传递变量，函数，对象
export default {
data(){
return{
msg:'subcomponents msg!'
}
}
props:{
"title":String,
"run":Function,
"home":Object
}
}
《3 在子组件使用
i am header components! -- {{title}} --
<button @click="run('123')">run parent component function</button>
注意：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
