精华内容
下载资源
问答
  • 主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • VUE注册全局组件

    千次阅读 2017-08-24 17:37:27
    1,新建自定义组件MyComp.vue,在这个vue里面就是这个组件的具体的内容,比如:    .....    export default{  name: 'my-comp'  } 2,新建index.js,按如下两种方式之一输入脚本内容 (1)方式1 import ...
    1,新建自定义组件MyComp.vue,在这个vue里面就是这个组件的具体的内容,比如:
    
    <template>
      <div>
          .....
      </div>
    </template>
    <script>
      export default{
        name: 'my-comp'
      }
    </script>
    2,新建index.js,按如下两种方式之一输入脚本内容
    (1)方式1
    import MyComp from './MyComp.vue'


    const Comp = {
        install: function(Vue){
            Vue.component('Comp', MyComp)
        }
    }
    // 导出组件
    export default Comp


    (2)方式2
    import MyComp from './MyComp.vue'
    MyComp.install = function (Vue) {
      Vue.component(MyComp.name, MyComp)
    }


    export default MyComp

    展开全文
  • Vue注册全局组件-弹窗组件

    千次阅读 2018-08-30 20:00:02
    在src目录下新建components文件夹 ...1.新建module文件夹,然后新建v-alert.vue <template> <transition name="fade"> <div class="v-alert g-center" :style="{zIndex}"> <div ...

    在src目录下新建components文件夹

    1.新建module文件夹,然后新建v-alert.vue

    <template>
      <transition name="fade">
        <div
            class="v-alert g-center"
            :style="{zIndex}">
          <div
              class="v-cont"
              :class="{shadow:!hideCont}"
              :style="[innerWidth]">
            <div
                v-if="title.trim()"
                :style="[{backgroundColor:bgColorTit,color:cancelCol},titleStyle]"
                class="title g-font18">
              {{title}}
              <span class="title-data">{{titleData}}</span>
            </div>
            <div
                v-if="isCancel"
                class="v-cancel">
              <div
                  class="cancel-icon"
                  :style="{color:cancelCol}"
                  @click="cancel">
                &#xe656;
              </div>
            </div>
            <slot name="slot3"></slot>
            <div
                v-if="!hideCont"
                :style="styles"
                class="content">
              <slot></slot>
            </div>
            <slot name="slot2"></slot>
          </div>
          <div
              class="g-fixed alert-wrap"
              @click="$emit('cancel')"
              :style="{backgroundColor:bgWrapColor}"></div>
        </div>
      </transition>
    </template>
    <script>
      export default {
        name: "v-alert",
        props: {
          title: {default: ""},
          // titFontSize:{default: '16'},
          bgColorTit: {default: "#40404C"},
          bgColor: {default: "#fff"}, // 背景色
          bgWrapColor: {default: "rgba(42, 47, 59, 0.6)"}, //外套背景色
          cancelCol: {default: "#fff"}, //按钮颜色
          width: {required: true, type: Number}, //宽度
          minWidth: {type: Number, default: 0},
          isCancel: {type: Boolean, default: true}, //是否显示关闭按钮
          titleData: {default: ""},
          hideCont: {type: Boolean, default: false}, //是否隐藏cont
          zIndex: {default: 2000},
          styles: {
            default() {
              return {};
            },
            type: Object
          },
          titleStyle: {
            default() {
              return {};
            },
            type: Object
          },
        },
        components: {},
        computed: {
          innerWidth() {
            let dfu = {
              backgroundColor: this.bgColor
            };
            this.minWidth > 0
              ? dfu.minWidth = `${this.minWidth}px`
              : dfu.width = `${this.width}px`;
            return dfu;
          }
        },
        methods: {
          cancel() {
            this.$emit("cancel");
          }
        },
        mounted() {
          document.addEventListener(
            "keydown",
            event => {
              let keyCode = this.$_lib.getKeycode(event);
              if (keyCode === 'Escape' || keyCode === 27) this.$emit("cancel");
            },
            false
          );
        }
      };
    </script>
    <style lang="scss"
        rel="stylesheet/scss"
        scoped>
      .v-alert {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        .alert-wrap {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /*z-index: 2000;*/
        }
        .v-cont {
          min-width: 100px;
          min-height: 100px;
          background-color: #ffffff;
          position: relative;
          border-radius: 2px;
          .shadow {
            box-shadow: 0 2px 30px rgba(42, 47, 59, 0.2);
          }
          z-index: 2001;
          .title {
            width: 100%;
            line-height: 70px;
            color: #ffffff;
            padding-left: 30px;
          }
          .title-data {
            color: #f8e19a;
          }
          .content {
            padding: 40px;
            /*padding: 60px 40px 50px 40px;*/
            word-wrap: break-word;
            text-align: left;
          }
        }
    
        .v-cancel {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 70px;
        }
        .cancel-icon {
          position: absolute;
          text-align: center;
          width: 20px;
          height: 20px;
          line-height: 20px;
          right: 20px;
          top: 50%;
          margin-top: -10px;
          color: #ffffff;
          cursor: pointer;
          transition: 200ms;
          &:hover {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
          }
        }
      }
    </style>

     

    2.在nodule同级目录新建vue-component.js

    import VAlert from './v-alert'; //弹窗
    
    export default {
      install(Vue) {
        Vue.component('VAlert', VAlert);
      }
    };

    3.在main.js中注册为全局组件

    import vueComponent from "./components/vue-component";
    Vue.use(vueComponent);

     4.在其他组件可以直接用了,无需import

    <template>
        <v-alert
          v-if="is_alert"
          @cancel="is_alert=false"
          bg-color-tit="#40404C"
          cancel-col="#fff"
          :title="提示"
          :width="680">
          <div></div>
        </v-alert>
    </template>

     

    展开全文
  • vue注册全局组件报错

    千次阅读 2019-03-22 11:17:30
    我当时在想:我已经注册了,并且已经引用了 引用代码: export default { install (Vue, options) { Vue.component('new-header-search', () => import('./header/header-search')) } } 一直没找到毛病,...

    报错如下:

     

     

     

    我当时在想:我已经注册了,并且已经引用了

    引用代码:

    export default {
      install (Vue, options) {
        Vue.component('new-header-search', () => import('./header/header-search'))
      }
    }
    

    一直没找到毛病,结果我发现,是我在main.js里面写错啦

    正确的写法应该是

    import components from '../src/components/index'
    Vue.use(components)

    我之前是直接写成了

    import '../src/components/index'   
    
    
    
    这个就错误啦
    

     

    展开全文
  • vue 全局组件注册With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js...

    vue 全局组件注册

    With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js file (the file that handles creating our Vue app).

    随着新版本Vue3的发布,开始学习新更新将如何改变我们编写代码的方式非常有用。 一个例子是我们编写index.js文件(用于处理创建Vue应用程序的文件)的方式的变化。

    Today, we’ll take a look at how to register Vue3 Global Components that can be used across our entire Vue app. It’s a little different from how we declared them in Vue2, but it’s just as simple.

    今天,我们将研究如何注册可在整个Vue应用程序中使用的Vue3全局组件。 与我们在Vue2中声明它们的方式稍有不同,但它很简单。

    For this tutorial, I am working with the beta release of Vue3 that can be found via the vue-next Github repository.

    对于本教程,我正在使用Vue3beta版本 ,可以通过vue-next Github存储库找到它。

    Alright. Let’s just get straight to it.

    好的。 让我们直接说吧。

    什么是Vue全球组件? (What are Vue Global Components?)

    First off, we have to understand what a Vue3 global component is and why we might want to use one.

    首先,我们必须了解Vue3全局组件是什么以及为什么要使用它。

    Normally, when we want to include a component inside our Vue instance, we register it locally. That normally looks something like this.

    通常,当我们想在Vue实例中包含一个组件时,我们会在本地注册它。 通常看起来像这样。

    <script>
    import PopupWindow from '../components/PopupWindow.vue';
    export default {
    components: {
    PopupWindow
    }
    }
    </script>

    However, let’s say that there is a component that we know we’re going to be using many times across our Vue project. It can get messy to register this component locally inside every file — especially if our project gets refactored or something.

    但是,假设有一个组件,我们知道我们将在整个Vue项目中多次使用它。 在每个文件中本地注册此组件可能会很麻烦-尤其是在我们重构了项目或其他内容的情况下。

    In this case, it could be useful to globally register the component — making it accessible in all subcomponents of our main root Vue instance. In other words, globally registering a component means that we don’t have to import it in each file.

    在这种情况下,全局注册该组件可能会很有用-使它可以在我们的主根Vue实例的所有子组件中访问。 换句话说,全局注册一个组件意味着我们不必将其导入每个文件中。

    Let’s take a look at how this is done in Vue2 and how we can do it now in Vue3.

    让我们看一下如何在Vue2中完成此操作以及现在如何在Vue3中进行操作

    全局组件如何在Vue2中工作 (How global components work in Vue2)

    In Vue2, wherever we create our Vue instance, we just have to call a Vue.component method to register a global component.

    在Vue2中,无论我们在哪里创建Vue实例,我们都只需要调用Vue.component方法来注册全局组件。

    This method takes two arguments:

    此方法有两个参数:

    1 — the name of our global component

    1-我们的全球组成部分的名称

    2 — our component itself

    2-我们的组件本身

    Here’s a quick example of what that might look like.

    这是一个大概的例子。

    import Vue from 'vue'
    import PopupWindow from './components/PopupWindow'
    import App from './App.vue'
    Vue.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
    new Vue({
    render: h => h(App)
    }).$mount('#app')

    Now this ‘PopupWindow’ component can be used in all children of this Vue instance! Easy as that.

    现在,此“ PopupWindow”组件可以在此Vue实例的所有子级中使用! 那样简单。

    现在,在Vue3中呢? (Now, what about in Vue3?)

    In Vue3, the code varies slightly just because of creating our Vue instance works a little differently (using createApp), but it is just as simple to understand.

    在Vue3中,由于创建我们的Vue实例(使用createApp)的工作方式略有不同,因此代码略有不同,但是它很容易理解。

    Instead of declaring global components from our Vue object, we first have to create our app. Then, we can run the same .component method as we would before.

    首先必须创建应用程序,而不是从Vue对象声明全局组件。 然后,我们可以运行与以前相同的.component方法。

    import { createApp } from 'vue'
    import PopupWindow from './components/PopupWindow'
    import App from "./App.vue"
    const app = createApp(App)
    app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
    app.mount('#app')

    As you can see, it’s very similar, but the slight differences in the way our Vue instance is initialized make us change up our syntax a little bit.

    如您所见,它非常相似,但是Vue实例的初始化方式略有不同,使我们对语法进行了一些更改。

    就是这样! (And that’s it!)

    There you have it! We can now use our COMPONENT component in any Vue component that comes from this root instance. It’s a great way to keep our code DRY.

    你有它! 现在,我们可以在此根实例提供的任何Vue组件中使用COMPONENT组件。 这是使我们的代码保持干燥的好方法。

    It’s important to carefully consider when we want to use a global component vs. a local component. If we just make everything a global component by default, it means that even when we’re not using a component, it would still be included in our build — increasing page load times.

    重要的是要仔细考虑何时要使用全局组件还是本地组件。 如果我们默认将所有内容都设为全局组件,则意味着即使不使用组件,该组件仍将包含在我们的构建中-增加页面加载时间。

    Global components can be a very powerful tool when used properly, and with the new changes in Vue3, it is still very easy to use these types of components in your Vue project.

    正确使用全局组件可以成为非常强大的工具,并且随着Vue3新变化,在Vue项目中使用这些类型的组件仍然非常容易。

    If you have any questions, leave them in the comments down below.

    如有任何疑问,请在下面的注释中保留。

    Happy coding :)

    快乐的编码:)

    翻译自: https://medium.com/swlh/how-to-register-a-vue3-global-component-5a6e2fe4dd31

    vue 全局组件注册

    展开全文
  • 本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细绍了vue2.0全局组件之pdf的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue注册全局组件和局部子组件

    千次阅读 2019-01-25 16:50:21
    Vue注册全局组件和局部子组件 ps: 这里是使用vue-cli搭建的vue开发目录 Vue注册全局组件 第1步: 创建子组件,代码如下 &lt;template&gt; &lt;div id="header"&gt; &lt;div ...
  • Vue自定义全局组件install的实现

    千次阅读 2020-12-01 16:18:08
    在一些Vue的开源组件中我们常常会看到一个install()方法来注册全局组件,而它的实现方式其实是非常简单的。 1.首先建立一个公用的组件。 // Cmponent.vue 公用的组件 <template> <div>我是组件</div...
  • vue项目的全局组件如果很多的话 每次自己手动注册的话还是很麻烦的 下面展示怎么自动化注册 先写一个全局组件 必须要命名name 后面全局使用的标签都是根据name引用的 然后在components 文件夹根目录下建index.js ...
  • 01 vue3.0注册全局组件

    2021-03-12 22:49:59
    vue3.0注册全局组件 import { createApp } from 'vue' import App from './App.vue' import HelloWorld from './components/HelloWorld.vue' const app = creatApp(App) // 第一个参数自定义即可 app.component('...
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇使用use注册Vue全局组件和全局指令的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue install 注册全局组件

    万次阅读 2019-07-19 18:20:55
    项目中的有些组件使用的频率比较高,这时候我们可以注册全局组件,这样就不用每次使用的组件的时候一次次的导入 具体使用的步骤如下 一般会把这个常用的组件在main.js文件中注册好 1.首先先建立一个公用的组件 // ...
  • 关于 vue3 全局组件 Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”. 组件...
  • vue注册全局弹窗组件

    千次阅读 2020-04-16 12:30:03
    —|— elert.vue —|— elert.js elert.vue代码: <template> <div class="modal fade" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"...
  • Vue注册全局组件和局部子组件 ps: 这里是使用vue-cli搭建的vue开发目录 1Vue注册全局组件第1步: 创建子组件,代码如下 <template> <div id="header"> <div class="head">全局组件</div...
  • vue自定义全局组件 说明:本案例是封装的一个弹框页面,因为只想要一个遮罩,内容自定义。因为ElementUI上已经提供了一个弹框组件,但觉得elementUI的组件内容有点多,所有自己就封装了全局组件。自己封装的参考了...
  • 一,先看看全局组件的引用,就拿最常用的全局的暂无数据来举例,看看全局的是如何实现的。 Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index....
  • 使用use注册Vue全局组件和全局指令

    万次阅读 2018-01-07 23:11:16
    Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的...但是这种方法是与根实例写在同一个文件中,如果要同时注册多个全局组件,就会使根实例文件过重,因此使用Vue.use()来“安装”
  • VUE组件深入理解组件简介组件的基本使用全局注册注册全局组件全局组件使用进阶③组件内容中的其他选项局部注册注册局部组件 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用...
  • Vue自定义全局组件(插件)

    千次阅读 2017-11-24 10:55:12
    全局组件: 就是指可以在main.js中使用Vue.use()进行全局引入,然后在其他组件中就可以使用了 import VueRouter from 'vue-router' Vue.use(VueRouter) 普通组件: 每次使用时都要引入 如何自定义全局组件 首先写一个...
  • vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain、Vheader、Vleft、Vcontent都是局部组件,Vheader、Vleft、Vcontent是...
  • vue-cli3 注册全局组件注册局部组件 注册全局组件 注册全局组件 一定要在main.js里面,main.js是逻辑入口文件。全局注册的组件,在任何地方都是可以使用的。 import Vue from 'vue' import App from './App....
  • vue定义全局组件及全局过滤器

    千次阅读 2018-11-12 10:54:10
    全局组件定义模式 创建文件夹 包含 index.js 配置文件 和 自定义组件 挂在在 vue实例底下  import OrgSelector from './orgSelector' const orgSelector = { install:function(Vue){ Vue.component("...
  •  建一个 js 文件, 注册全局组件, 并且暴露出去     在页面就可以直接使用了 2 全局注册过滤器 3 定义全局方法  建一个文件注册全局方法    使用 exports 可能会报错,应该将 .babelrc 文件中的 “modules...
  • 首先和普通组件一样定义一个自定义组件在components下面:CusConfirm <template> <transition name="fade"> <div class="cus-confirm-mask" v-if="flag" @click="cancel"> <d...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 74,530
精华内容 29,812
关键字:

vue注册全局组件

vue 订阅