通过Vue.component(‘组件名’, {配置对象})注册全局组件

在main.js中注册全局组件 test

import Vue from 'vue'
import App from './App.vue' //全局组件,定义后可直接使用,无需引入
Vue.component('test', {
data () {
return {
count: 0
}
},
template: '<button @click="count++">点击次数{{count}}</button>'
}) new Vue({
el:'#app',
template: '<App />',
components: {App}
})

在App组件中使用 test 组件

  不需要另外引入,直接使用即可

<template>
<div>
<test />
</div>
</template> <script>
export default {
data () {
return { }
}
}
</script> <style>
</style>

Vue全局组件注册的更多相关文章

  1. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  2. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  3. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  4. vue插件 使用use注册Vue全局组件和全局指令

    插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...

  5. vue 全局组件的注册

    第一步 在main.js里面 引入需要注册的组件例如: //引入组件 import header from  './components/header.vue' import footer from ...

  6. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  7. vue 全局组件【原】

    1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...

  8. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  9. Vue全局组件创建三种方法

    <my-com1></my-com1> <my-com2></my-com2> <template id="tmp1"> ...

随机推荐

  1. Charles 修改请求/compose和Compose New

    本文参考:撰写工具/compose和Compose New 撰写工具/compose和Compose New compose 是在原有的请求基础上,修改: 可以写各种状态: – URL: – Meth ...

  2. Cabloy-CMS:动静结合,解决Hexo痛点问题(进阶篇)

    前言 前一篇文章 介绍了如何通过Cabloy-CMS快速搭建一个博客站点. 这里简单介绍Cabloy-CMS静态站点的渲染机制,更多详细的内容请参见https://cms.cabloy.com 渲染规 ...

  3. 01 jvm学习过程概述

    声明:本博客仅仅是一个初学者的学习记录.心得总结,其中肯定有许多错误,不具有参考价值,欢迎大佬指正,谢谢!想和我交流.一起学习.一起进步的朋友可以加我微信Liu__66666666 这是简单学习一遍之 ...

  4. [Linux] CentOS 显示 -bash: vim: command not found

    转载自:https://www.cnblogs.com/wenqiangwu/p/3288349.html i. 那么如何安裝 vim 呢?输入rpm -qa|grep vim 命令, 如果 vim ...

  5. 【linux】【jenkins】自动化运维二 安装插件

    gitlab安装教程参考:https://www.cnblogs.com/jxd283465/p/11525629.html 1.Maven Integration Plugins Jenkins安装 ...

  6. Redis 相关功能和实用命令(五)

    慢查询原因分析 由于 Redis 是单线程的,它内部维护了一个命令队列,所以当有耗时的命令出现时,比如 keys *,后面的命令会被阻塞,通查查出慢查询可以对服务进一步优化. 设置慢查询阀值:默认10 ...

  7. Idea 配置Jrebel热部署

    虽说Idea自带热更新功能,但是一旦mapper更改,则不能及时更新,影响开发效率. 接下来,我们来配置Jrebel热更新,简单方便实用. 第一步:进入插件下载页面. 第二步:安装jrebel插件. ...

  8. thymeleaf 将后端绑定数据直接传递js变量

    根据自我需求,thymeleaf可以直接将后端数据传递给js中进行使用,例如: 1.后端接口数据: @Controllerpublic class TestController { @RequestM ...

  9. MongoDB的基本操作(增删改查)

    ​ 目录 概念整理 数据库:一个MongoDB中可以建立多个数据库. 集合:MongoDB的文档组. 文档:实际存放数据的地方. 常见的操作 数据库(新增,删除) 集合(新增,编辑,删除) 文档(增删 ...

  10. 一步一步剖析Dictionary实现原理

    本文是对c#中Dictionary内部实现原理进行简单的剖析.如有表述错误,欢迎指正. 主要对照源码来解析,目前对照源码的版本是.Net Framwork 4.8,源码地址. 1. 关键的字段和Ent ...