VUE注册全局组件和局部组件

vue组件有两种，一种是全局组件，一种是局部组件。组件命名建议驼峰法。编译器是vscode

注册局部组件的方法：直接在vue注册、调用即可：

注：适合当前页面用

<template>

  <div>

       <new-Zujian></new-Zujian>

  </div>

</template>

 

<script>

export default {

    data () {

         return {}

    },

components: {

    'new-Zujian': {//组件名

          template: '<p>new-Zujian新局部组建</p>'

    }

}

</script>

引入局部组件写法：在需要使用局部组件页面中：

注：这种是把整个MyZujian.vue页面中内容看为局部组件调用；

代码如下：

//需要使用MyZujian组件的页面

<template> 

       <div>

               <MyZujian></MyZujian>

       </div>

</template>

<script>
import MyZujian from '@/components/MyZujian.vue';//文件的相对路径
export default {
components: {MyZujian}, // 直接初始化就可以啦，不需要Vue.use();
data() {},
methods: {}
};
</script>

<style lang="scss" scoped>

//样式代码
</style>

引入全局组件写法：在项目的main.js中：

注：通用代码写到MyZujian.vue（新组件）中进行封装、全局调用，适用整个项目

代码如下：

import Vue from 'vue';
import MyZujian from '@/components/MyZujian.vue'; // 导入自己写的组件文件，相对路径

Vue.use(MyZujian); // 自定义全局组件的时候需要Vue.use();
Vue.component('my-zujian', MyZujian); //初始化组件；

new Vue({
el: '#app',
router,
components: {
App,
MyZujian //这里也别忘记奥；
},
template: '<App/>',
});

完成上面，即新组件<my-zujian></my-jian>便可以在项目中的任何地方调用了；

😁新手上路，亲爱的们多多指教奥💗～