一、main.js

//1:引入 vue
import Vue from 'vue';

import App from './app.vue';

//引入子组件对象
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
//声明全局组件
Vue.component('headerVue', headerVue);

//注册一个组件，第一个参数是名称，在template中直接使用,第二个参数是实际的对象，显示成什么内容，具备什么功能
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);
new Vue({
    el: '.app',
    // render:function(c){
    //     return c;
    // }
    render: c => c(App)
    //1:当参数是一个的时候，小括号可以省略
    //2:当代码只有一行且是返回值的时候,可以省略大括号

})

二、app.vue，这里代表父组件

<template>
    <div>  //这里只应该有一个父节点
        <header-vue textone="大"></header-vue>  //在mian.js中声明的代码直接使用就可以了，哈哈
        <body-vue v-bind:texttwo="text2"></body-vue>
        <footer-vue></footer-vue>
    </div>
</template>
<script>

    export default {
        data(){
            return {
                text2:'哈哈呵呵'   
            }
        },
        methods:{},
    }
</script>
<style scope>   //少了就就是全局的style属性
.red{
    background-color: red;
}
.green{
    background-color: yellowgreen;
}
.blue{
    background-color: skyblue;
}
.pink{
    background-color: hotpink;
}
</style>

三、具体各个子组件的代码

<template>
    <div>
        我是{{textone}}头
          
            <button @click="show">从js中获取父组件值</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        //接受父组件值参数的设置
        props:['textone'],
        methods:{
            show(){
                alert(this.textone)
            }
        }
    }
</script>
<style scoped>
 div{
    height: 100px;
    background-color: yellowgreen;
 }
</style>

这里的 props 代表接受父组件的参数，直接在 <template> 中设置  {{  }}  取出值来 ， 如果想在<script> 中取值，就要使用 this.Xxx. methods里面一个个的函数。