精华内容
下载资源
问答
  • vue 全局组件注册_如何注册vue3全局组件
    千次阅读
    2020-09-19 20:49:27

    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 全局组件注册

    更多相关内容
  • vue3 全局组件/局部组件

    千次阅读 2020-11-19 15:57:28
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...vue3组件</title> <script src="./vue3.js"></script&
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue3组件</title>
        <script src="./vue3.js"></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
            <br>
            ----------
            <br>
            全局组件:<child></child>
            <br>
            局部组件:<comp></comp>
        </div>
        <template id="comp">
            子组件内容 {{msg}} {{count}}
            <button @click="count++">add</button>
        </template>
        <script>
            const {createApp} = Vue
            const comp = {
                data:()=>({
                    msg:'子组件',
                    count:0
                }),
                template:"#comp",
                methods:{ }
            }
            const options = {
                data:()=>({
                    msg:'vue3组件'
                }),
                components:{
                    comp
                }
            }
            
            const app = createApp(options)
            
            // 创建一个全局组件
            app.component('child',comp)
      
            app.mount('#app')
    
    
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue3定义全局组件

    千次阅读 2021-05-25 23:10:55
    vue3 全局组件需在 main.js 中定义,参考官网中的 2 个例子,实操如下。若需构建 vue 项目,请移步 vite构建vue3项目。 目录如下 注册全局组件 // main.js import { createApp } from 'vue' import App from './App...

    前言

    vue3 全局组件需在 main.js 中定义,参考官网中的 2 个例子,实操如下。若需构建 vue 项目,请移步 vite构建vue3项目
    目录如下
    在这里插入图片描述

    注册全局组件

    // main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    
    // createApp 函数创建一个应用实例
    const app = createApp(App)
    // 定义全局组件
    app.component('alert-box', {
      template: `
      <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
      </div>
      `
    })
    
    app.component('blog-post', {
      props: ['postTitle'],
      template: `
      <h3>{{ postTitle }}</h3>
      `
    })
    // mount 函数返回根组件实例
    const vm = app.mount('#app')
    
    console.warn('app', app, vm);
    

    使用全局组件

    // HelloWorld.vue
    <template>
      <h1>{{ msg }}</h1>
    
      <p>
        <a href="https://vitejs.dev/guide/features.html" target="_blank">
          Vite Documentation
        </a>
        |
        <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
      </p>
    
      <button @click="state.count++">count is: {{ state.count }}</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test hot module replacement.
      </p>
      <table>
        <tr v-is="'blog-post'" post-title="表格行的标题"></tr>
      </table>
      <alert-box>
        Something bad happened.
      </alert-box>
      <blog-post post-title="hello!"></blog-post>
    </template>
    
    <script setup>
    import { defineProps, reactive } from 'vue'
    
    defineProps({
      msg: String
    })
    
    const state = reactive({ count: 0 })
    </script>
    
    <style scoped>
    a {
      color: #42b983;
    }
    </style>
    

    在这里插入图片描述
    结果全局组件未生效,且控制台打印出警告:

    [Vue warn]: 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”.

    此处的警告在官网中已经有明确的原因描述
    运行时 + 编译器 vs. 仅运行时
    在这里插入图片描述
    使用构建工具
    在这里插入图片描述

    由于 main.js 中全局组件都是使用 html 字符串传递到 template 选项,此时就是 运行时 + 编译器,需要完整的构建版本,故需在 vite.config.js 中配置 vue 构建版本为 vue.esm-bundler.js

    配置 vue 构建版本

    // vite.config.js
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: {
          'vue':  'vue/dist/vue.esm-bundler.js' 
        },
      },
    })
    

    效果如下:
    在这里插入图片描述

    总结

    • vue3 使用构建工具,默认仅运行时
    展开全文
  • 主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue3 全局组件 配置问题

    千次阅读 2021-04-26 14:12:36
    关于 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”. 组件...

    关于 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构建中不支持运行时编译。将你的bundle设置为别名"vue"为"vue/dist/vue.esm-bundler.js"。

    原因:默认vue3为runtime模式,指向dist/vue.runtime.common.js

    解决方法 vue.config.js
    alias: {
    ‘vue’: ‘vue/dist/vue.esm-bundler.js’
    },
    并且配置 runtimeCompiler: true

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • vue3 注册全局组件(公用组件)

    千次阅读 2022-03-10 14:15:10
    vue3 注册全局组件
  • 主要介绍了Vue 全局loading组件,需要的朋友可以参考下
  • 组件vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的局部组件template与components属性结合使用挂载其中 Vmain、Vheader、Vleft、Vcontent都是局部组件,Vheader、Vleft、Vcontent是一起挂载在...
  • 简介 Vue.use( plugin ):安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法将被作为 Vue 的... 添加全局方法或属性 Vue.myGlobalMethod = f
  • vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情。 每当我们需要修改的时候,只需维护那一个...
  • vue3注册全局组件

    2022-03-19 14:51:38
    我这使用的是ts,使用js的话修改对应的就行 tabs.vue 和 index.ts 同目录
  • 主要介绍了Vue全局组件与局部组件的区别,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue3 全局注册组件

    千次阅读 2022-03-23 19:21:49
    Vue3 全局注册组件 vue3全局注册组件,个人觉得还是挺重要的,记录一下方法 全局注册组件分为三个文件 一、组件本身,再components文件夹下面,需要自己来写 二、main.js文件,用于注册文件 三、App.vue用于挂载所有...
  • 两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,...
  • Vue3注册全局组件不生效问题 新创建一个项目后,需要注册全局组件,发现页面并没有什么反应,控制台没有报错,但是有个警告 解决办法: 添加vue.config.js文件,添加配置如下: runtimeCompiler: false, //是否使用...
  • 主要是有的组件 我们可能很多页面都会用到 这个时候 为了避免每个页面组件都引入, a.vue import header from "@/components/header.vue" ...因为现在vue3 也慢慢替换vue2 但v2可能还是主流 所以这里我写出
  • 下面小编就为大家介绍一下vue 自定义全局方法,在组件里面的使用。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 组件Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章主要介绍了vue组件全局,局部,动态加载组件),需要的朋友可以参考下
  • 本篇文章主要介绍了自定义vue全局组件use使用、vuex的使用详解,本文主要来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理
  • Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。 全局组件Vue官方文档中介绍的是使用Vue.component(tagName...
  • 主要介绍了基于vue写一个全局Message组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了详解Vue 动态组件全局事件绑定总结,从示例中发现并解决问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue全局组件和局部组件的写法

    千次阅读 2019-02-13 19:34:30
    今天在学习vue的时候遇到了一个让我纠结的地方,那就是vue组件全局注册到底该怎么用,我查阅资料发现众说纷纭……晚上看到了这篇文章,经过实践后发现确实可行,博主采用的比较幽默的方式让我能够对vue组件全局...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 92,997
精华内容 37,198
关键字:

vue3全局组件