一 创建测试项目

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 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

七 参考

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