vue-父子组件使用

父子组件使用

• 父和子，使用的是父，被用的是子
• 父需要声明子组件，引入子组件对象，声明方式如下

import 子组件对象 from './xxx.vue';

    {
        components:{
            组件名:子组件对象
        }
    }

<template>
    <div> 
        //引用，必须加
         <header-vue></header-vue>
         <body-vue></body-vue>
         <footer-vue></footer-vue>
    </div>
</template>
<script>
//引入子组件对象
import headerVue from '../components/header.vue';
import bodyVue from '../components/body.vue';
import footerVue from '../components/footer.vue';

    export default {    
        data(){         
            return {
                
            }
        },

        methods:{    

        },
        //必须声明
        components:{
            //组件名（在模板中使用）：组件对象
            headerVue:headerVue,
            bodyVue,  //简写
            footerVue
        }
    }
</script>

在components下的header.vue中使用样式：

//scoped当前有效
<style scoped>
	div{
        height:100px;
        background-color:pink;
    }
</style>

• 全局组件，使用更为方便，不需要声明，直接用
• 在main.js中引入一次，在main.js中使用 Vue.component('组件名',组件对象);
• 所有的组件就可以直接通过组件名，使用

//引入子组件对象
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);