全局注册的组件可以在其他组件内直接使用,它在整个Vue实例中都是全局有效的。

非单文件组件中使用

Vue.component('student-list', {
template: `
<div>
<ul>
<li v-for="(student, index) in students" :key="index">
学生姓名:{{student.name}}
</li>
</ul>
</div>
`
}) Vue.component('teacher-list', {
template: `
<div>
<ul>
<li v-for="(teacher, index) in teachers" :key="index">
老师姓名:{{teacher.name}}
</li>
</ul>
<!-- student-list组件用在teacher-list组件中 -->
<student-list></student-list>
</div>
`
})

单文件组件中使用

在单文件组件中全局注册组件的方式有些不同,在main.js中引入组件,并使用Vue.component('name', var)进行全局注册

import movieList from '@/components/movie-list/movie-list.vue'

Vue.component('movie-list', movieList)

注册完成之后,在其他组件中,无需再导入,直接可以使用。

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

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

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

  2. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

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

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

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

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

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

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

  6. vue 全局组件【原】

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

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

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

  8. vue 全局组件的注册

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

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

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

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

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

随机推荐

  1. useradd linux系统创建用户和设置密码简单脚本-1

    useradd linux系统创建用户和设置密码简单脚本-1 linux_wangqiang 2019-12-04 20:51:18 65 收藏展开#!/bin/bash#快速创建用户 使用$1第一个 ...

  2. 2019年又迎来Hi1620,鲲鹏920则是Hi1620系列的正式品牌和型号

    据记者了解,2013年华为就发布了Hi1610,2014年的Hi1612是ARM64位CPU,2016年的Hi1616是首颗支持多路的ARM处理器,2019年又迎来Hi1620,鲲鹏920则是Hi16 ...

  3. JDK、JRE 和 JVM 的区别

    JDK JDK 是 Java Development Kit 的缩写,JDK 是 Java 语言的软件开发工具包( SDK ).它提供了Java 开发.编译.运行需要的文件和环境. 如果你是 Java ...

  4. STM32标准外设库中USE_STDPERIPH_DRIVER, STM32F10X_MD的含义

    在项目中使用stm32标准外设库(STM32F10x Standard Peripherals Library)的时候,我们会在项目的选项中预定义两个宏定义:USE_STDPERIPH_DRIVER, ...

  5. centos 7修改yum源

    centos系统要定期更新,前天使用sudo yum update命令更新过程中出错,安装的是x64的系统,结果更新的内容有i686的依赖包,最终由于64与32位系统依赖的原因导致更新失败,更糟糕的是 ...

  6. 调试备忘录-SWD协议解析

    目录--点击可快速直达 目录 写在前面 1  SWD协议简介 2  SWD物理层协议解析 2.1  SWD通信时序分析 2.2  SWD 寄存器简介 2.2.1  DP寄存器 2.2.2  AP寄存器 ...

  7. Redis 内存大小限制+键值淘汰策略配置

    限制最大内存 windows 的 maxmemory-policy 策略可能会少一些 # 指定 Redis 最大内存限制,Redis 在启动时会把数据加载到内存中,达到最大内存后,Redis 会先尝试 ...

  8. 五种开源API网关实现组件对比

    五种开源API网关实现组件对比     API 网关一些实现 使用一个组件时,尤其是这种比较流行的架构,组件肯定存在开源的,我们不必自己去从零开始去实现一个网关,自己开发一个网关的工作量是相当可观的, ...

  9. Jenkins代码自动部署相关文档

    环境 centos 7.0+ Java JDK 1.8+ jenkins 2.220 maven 3.0+ git 1.8+ 注意事项 一. linux 安装 JDK (jdk-8u201-linux ...

  10. TensorFlow编程结构

    TensorFlow编程结构 TensorFlow 与其他编程语言非常不同. 首先通过将程序分为两个独立的部分,构建任何拟创建神经网络的蓝图,包括计算图的定义及其执行.起初这对于传统程序员来说看起来很 ...