2021-04-07 vue3.0中的 全局/局部组件注册方法

局部组件注册方法

<template>
    <!-- vue中的组件相关 -->
    <div id="App">
        <!-- 3.挂载组件 -->

        <v-head></v-head>
        <v-body></v-body>
        <v-foot></v-foot>
        <!-- <HeadCom></HeadCom>
        <BodyCom></BodyCom>
        <FootCom></FootCom> -->
    </div>
</template>

<script>
//1.引入组件
import HeadCom from '@/components/Head.vue';
import BodyCom from '@/components/Body.vue';
import FootCom from '@/components/Footer.vue';

export default {
    name: 'App',
    data() {
        return {};
    },

    //2.注册组件
    components: {
        'v-head': HeadCom,
        'v-body': BodyCom,
        'v-foot': FootCom

        //简写
        // HeadCom,
        // BodyCom,
        // FootCom
    }
};
</script>

<style>
#App {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>

头部组件

<template>
    <div id="headCom">
        头部组件
        <v-mBox></v-mBox>
    </div>
</template>

<script>
import MessageBox from '@/components/common/mess2.vue';
export default {
    name: 'Head',

    data() {
        return {};
    },
    mounted() {},
    methods: {},
    components: {
        'v-mBox': MessageBox
    }
};
</script>

<style>
#headCom {
    width: 100%;
    flex: 1;
    background-color: #cbcbcb;
    position: relative;
}
</style>

中间组件

<template>
    <div id="bodyCom">
        中间组件
        <v-mBox class="mBox"></v-mBox>
    </div>
</template>

<script>
import MessageBox from '@/components/common/mess2.vue';
export default {
    name: 'Body',

    data() {
        return {};
    },
    components: {
        'v-mBox': MessageBox
    },
    mounted() {},
    methods: {}
};
</script>

<style>
#bodyCom {
    width: 100%;
    flex: 15;
    background-color: rgb(40, 229, 236);
    position: relative;
}
.mBox {
    left: 400px !important;
}
</style>

尾部组件

<template>
    <div id="footCom">
        尾部组件
        <v-mBox></v-mBox>
    </div>
</template>

<script>
export default {
    name: 'Footer',

    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style>
#footCom {
    flex: 2;
    width: 100%;
    background-color: rgb(130, 245, 85);
}
</style>

全局组件

<template>
    <div id="messBox">
        浮动小窗
    </div>
</template>

<script>
export default {
    name: 'mess2',

    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style>
#messBox {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgb(224, 63, 63);
    top: 0;
    left: 200px;
}
</style>

全局组件在main.js中的注册方法

import { createApp } from 'vue';
import App from './App.vue';

//1.引入全局组件
import _mesCom from './components/common/mess2.vue';

const app = createApp(App); //这里需要一个变量接收 createApp(App)

//2.注册全局组件
app.component('v-mBox', _mesCom);

app.mount('#app');

//vue的开发模式: mvvm
// 主要使用单组件开发(组件模块进行开发)

//步骤
/*1.组件创建
        xxx.vue
  2.组件注册
     全局注册/局部注册
      局部注册:在哪挂载在哪注册,类似局部变量
       在当前组件内部使用components:{}直接挂载
      
      全局注册:在整个vue对象上注册
        main.js上写

      以上方式均为同步加载
    */


已标记关键词 清除标记
<p> <span style="font-size:16px;color:#009900;"><strong>Vue3.0来了,你还学的动吗?</strong></span> </p> <p> <br /> </p> <p> 2020年9月底,Vue3.0正式版终于发布了。Vue<span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">在全球拥有 130 多万用户 ,它被应用于各种不同的场景中。而在国内,更是<span>最火热的前端框架,<span>2.0与3.0的开发模式有了很大的改变,所以</span>3.0的全新版本势必会引发新的一波学习潮流。对于前端开发者来说,不管你嘴上如何“学不动”,注定离不开“真相定律”,Vue3.0是你提升自身技术能力,晋升中级工程师一定要掌握的。</span></span> </p> <p>   </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">本课程将基于 Vue3.0 正式版,从Vue基础语法入手,全面掌握 Vue3.0 全家桶技术栈,并结合实战项目开发,让你拥有Vue3.0项目开发经验,更好的掌握Vue开发企业项目的流程 。<br /> </span> </p> <p> <br /> </p> <p> <span id="__kindeditor_bookmark_end_43__"></span><span style="color:#009900;font-family:-apple-system, BlinkMacSystemFont, "font-size:16px;background-color:#FFFFFF;"><strong>本课程共包括三个模块</strong></span> </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">一、<strong>Vue基础篇</strong></span> </p> <p> <span style="background-color:#FFFFFF;">本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点,还会精讲Vue 3.0核心语法,如计算属性、过滤器、监视器、模板、生命周期等内容。</span><span style="background-color:#FFFFFF;color:#121212;">会带你深入理解Vue组件化技术,讲解全局组件局部组件的定义,组件间数据传递,以及Vue内置组件等知识点。让你掌握模块化的概念,会通过Vue脚本架搭建项目,并掌握使用Axios发送AJAX请求,</span><span style="color:#121212;">让你快速入门Vue3.0。</span><span style="background-color:#FFFFFF;color:#121212;"></span> </p> <p> <span style="background-color:#FFFFFF;color:#121212;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">二、<strong>Vue核心篇</strong></span> </p> <p> <span>这个模块会带你讲解Vue3.0全家桶的知识点(Vue Router路由+Vuex状态管理),涉及Vue路由的用法、包括路由嵌套、路由模式、编程式导航、路由守卫等,还会全面讲解Vuex状态管理机制及使用,理解state、mutation、action等核心概念,让你轻松掌握Vue全家桶。</span> </p> <p> <span><br /> </span> </p> <p> <span style="background-color:#FFFFFF;"> </span> </p> <p style="color:#121212;"> 三、<strong>项目实战篇</strong> </p> <span style="color:#121212;"></span> <p> 实战项目会贴近企业流程,按照企业级别代码质量和工程开发流程进行授课,让你理解这套技术在企业中被使用的真实流程,更好的掌握Vue各个基础知识点。项目开发流程包括项目需求分析->环境搭建与配置->搭建远程Git仓库->接口分析->项目开发->打包上线。 </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#009900;"><strong>实战项目涉及内容</strong></span> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202010240323559662.png" /> </p> <p> <br /> </p>
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页