Vue.js中组件嵌套有两种方式

第一种:注册全局组件
  例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件

  //注册全局组件
Vue.component("users",Users); //前面的users是我们起的名字,后面的Users是我们对应的组件,想要识别这个组件,必须在上面通过import引入,
//引入组件
import Users from ‘./components/Users’

  有了全局组件的话,就可以在任何一个地方去调用这个东西,然后在App.vue中使用 <users></users> 标签去调用它。

  但是一般都使用局部的组件,很少使用全局组件。

第二种:局部组件
  在需要使用该组件的组件中,在<script> 中使用 import Users from './components/Users'  引入组件,然后在下面注册组件,在这里注册组件有两种方法:

第一种是:

 components:{
"users":Users
}

第二种是:

 components:{
Users
}

第二种省略了“users”直接使用Users,这样也是可以的。

  注意:如果采用第一种方法,起的别名不能和已有的标签冲突,否则不生效。

Vue.js之组件嵌套的更多相关文章

  1. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  2. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  3. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  4. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  5. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  6. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  7. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  8. Vue.js使用-组件(上篇)

    1.什么是组件 组件可以理解为定义的一个view模块,可重复使用. 2.组件使用 1)创建组件 var myComponent = Vue.extend({ template: ' this is a ...

  9. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

随机推荐

  1. 无线网络RSSI、SSID、BSSID

    获取无线网络,及无线网络的参数之前,我们先了解一下RSSI,SSID和BSSID分别是什么,当然你可以去百度或者维基百科查阅,我这里只是简单的说明一下.RSSI就是无线网络的信号强度,这个是和无线AP ...

  2. mysql 函数substring_index() 截取字符串

    函数: 1.从左开始截取字符串 left(str, length) 说明:left(被截取字段,截取长度) 例:select left(content,200) as abstract from my ...

  3. jQuery中事件绑定

    一.前言 最近在做项目中要用到jQuery来绑定事件,首先想到的是$(selector).事件名();这样绑定事件的方式,这种方式对事件进行绑定其实也就是bind()方法,但当选择器匹配的元素过多,$ ...

  4. 项目实践中--Git服务器的搭建与使用指南

    一.前言 Git是一款免费.开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.在平时的项目开发中,我们会使用到Git来进行版本控制. Git的功能特性: 从一般开发者的角度来 ...

  5. python装饰器的理解

    学习python,发现装饰器是一个比较难理解的地方. 下面用代码来说明. 装饰器的作用是为了切面编程(AOP).这种编程在java上有很多实现方式.下面直接说明吧: 1.作为装饰器的函数至少有两个de ...

  6. 如何在Linux下统计高速网络中的流量

    参考: http://www.geekfan.net/5558/ http://blog.jobbole.com/23638/ http://www.csdn.net/article/2014-03- ...

  7. Django学习之项目结构优化

    其实就是采用包结构,比如: 目录models,包含__init__.py,a.py,b.py 然后将model class写在a和b中,但是这样的话,导入时就要改变了! from models imp ...

  8. Unity3D - LINEAR INTERPOLATION

    原文地址:http://unity3d.com/learn/tutorials/modules/beginner/scripting/linear-interpolation 水平有限,翻译粗略,欢迎 ...

  9. Unity3d中模型导入轴向不对的解决方法

    在unity3d中导入模型,经常会遇到模型的轴向与unity中默认的轴向不符合的情况. 网上有很多解决办法都是说在3dmax中导出模型时修改模型的轴向,那么我接下来讲的就是如何在unity里面修改模型 ...

  10. hud项目lcd调试过程的一些见解

    1.帧缓冲(FrameBuffer)设备驱动帧缓冲设备为标准的字符型设备,在Linux中主设备号29,定义在/include/uapi/linux/major.h中的FB_MAJOR,次设备号定义帧缓 ...