vue如何在main.js中配置全局的通用公共组件

更新时间：2023年01月13日 14:36:59 作者：牛先森家的牛奶

这篇文章主要介绍了vue如何在main.js中配置全局的通用公共组件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

在main.js中配置全局的通用公共组件

1、在main.js中直接引入并注册

main.js引入并注册

import Loading from './components/Loading.vue';
Vue.component('Loading', Loading);

2、页面中使用组件

html中使用：

<template>
   <div class='wrapper'>
       <Loading  :ready="ready"></Loading>
   </div>
</template>
export default {
  name: "index",
  data() {
    return {
      ready: false,
    };
  },
  created() {
   // 这里是为了模拟改loading的显示和隐藏用的函数
    setTimeout(() => {
      this.ready = true
    }, 3000);
  },
  computed: {},
  methods: {
  },
};
</script>

vue.js全局组件的三种方式

组件：button imageview listview等这些都是AS系统提供给我们

使用的组件；前端也有像类似于后端的组件概念。

组件的语法格式：

全局组件

Vue.component(‘组件名’,{代码的定义})

1.组件名称：

羊肉串法：my-comp-name ->
骆驼/pascal法: orderItem- 或

2.代码的定义

2.1 template:‘HTML代码’
2.2 template: 多行代码,反引号，是ECMAScript6之后提供给我们的符号;
2.3 template：外部定义的方式；

三种方式定义分别如下：

第一种方式，单引号（或双引号）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局组件</title>
    <script src="../vue.js"></script>
</head>
<!-- 做下第一个组件的案例，后续前后端 开发会用到! -->

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <order-item></order-item>
    </div>
    <script>
        //1.需要针对order-item这个组件做一个定义，之前没有定义的；
        Vue.component('order-item',
            { template: '<ul><li>今天愚人节上课</li></ul>' }
        );
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '全局组件的定义!'
            }
        });
    </script>
</body>

</html>

第二种方式反引号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <order-item></order-item>
    </div>
    <div id="app1">
        <order-item></order-item>
    </div>
    <script>
        //1.定义组件;
        Vue.component('order-item', {
            template: `
                <div>
                    <h1>反引号的全局组件</h1>    
                    <p>京东特卖<p>
                    <ul><li>LV包包</li><li>GuCCI</li></ul>
                </div>
            `
        })
        //2.绑定
        new Vue({
            el: '#app'
        });
        new Vue({
            el: '#app1'
        });
    </script>
</body>

</html>

第三种方式外部ID

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <btn-counter></btn-counter>
    </div>
    <template id="btn-counter">
        <button @click="add">单击{{count}}次</button>
    </template>
    <script>
        //1.全局组件的定义;做个小作业做下测试；涵盖了：组件 data methods三种方式;
        Vue.component('btn-counter', {
            template: '#btn-counter',
            data: function () { return { count: 0 } },
            methods: { add: function () { this.count++ } }
        })
        //2.绑定;
        let vm1 = new Vue({ el: '#app' });
    </script>
</body>

</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue Element plus使用方法梳理
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型
2022-12-12
在vue中axios设置timeout超时的操作
这篇文章主要介绍了在vue中axios设置timeout超时的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue-cli3配置与跨域处理方法
这篇文章主要介绍了vue-cli3配置与跨域处理方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue.js系列之项目搭建(1)
今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版，因为是第一次使用vue，而且一开始使用的时候2.0出来一个月不到，很多坑都是自己去踩的，现在项目要上线了，所以记录一些过程
2017-01-01
Vue列表如何实现滚动到指定位置样式改变效果
这篇文章主要介绍了Vue列表实现滚动到指定位置样式改变效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
Vue.js组件tabs实现选项卡切换效果
这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
傻瓜式vuex语法糖kiss-vuex整理
kiss-vuex 是一个非常简单的语法糖类库，这篇文章主要介绍了傻瓜式vuex语法糖kiss-vuex整理，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
一步步从Vue3.x源码上理解ref和reactive的区别
vue3的数据双向绑定,大家都明白是proxy数据代理,但是在定义响应式数据的时候,有ref和reactive两种方式,如果判断该使用什么方式,是大家一直不很清楚地问题,下面这篇文章主要给大家介绍了关于从Vue3.x源码上理解ref和reactive的区别的相关资料,需要的朋友可以参考下
2023-02-02
基于vue.js中事件修饰符.self的用法(详解)
下面小编就为大家分享一篇基于vue.js中事件修饰符.self的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue导航守卫使用教程详解
这篇文章主要介绍了Vue导航守卫使用教程，可以向任意给定的导航守卫传递next，但是next的使用过程容易出错，需要确保next在任何给定的导航守卫中都被严格调用一次
2023-04-04