Vue.js之组件嵌套
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之组件嵌套的更多相关文章
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js使用-组件(上篇)
1.什么是组件 组件可以理解为定义的一个view模块,可重复使用. 2.组件使用 1)创建组件 var myComponent = Vue.extend({ template: ' this is a ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
随机推荐
- How to learn a new technology
是什么?为什么会出现? 这一阶段主要是对该技术有一个整体了解,他所解决的是什么问题,他的整体结构等. 怎么做? 最简单的是找一个上手视频,因为视频是非常直观的展示了技术的使用.先学会用是最根本的,对于 ...
- bye 2013 hello 2014
最近两个月除了必要的工作外,其余时间都在干一些我其实平时很少干的事, 喝酒.唱歌.打麻将.玩牌.以及到处跑找朋友玩,也许是过年的原因我放纵了自己,也许是自己心中的烦恼.我的博客记录着我每次看书学习的笔 ...
- Linux的Samba服务器
1.samba服务器概述 Samba最先在Linux和windows两平台之间架起一座桥梁,正是由于samba的出现,我们可以在Linux系统和Windows系统之间相互通信,比如拷贝文件,实现不同操 ...
- mongodb 实现关系型数据库中查询某一列 的效果
近期在tornado\mongodb\ansible mongodb中有个find()方法非常牛逼,能够将集合中全部的表都传出来,一開始我这么写 class Module_actionHandler( ...
- JS鼠标的拖拽原理
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...
- c++ 用namespace实现java的package的功能
以前喜欢这样组织文件: myproject/src/moduleA放moduleA的所有cpp文件 myproject/include/moduleA放moduleA的所有h文件 对moduleB.C ...
- Java重构-策略模式、状态模式、卫语句
前言 当代码中出现多重if-else语句或者switch语句时.弊端之一:如果这样的代码出现在多处,那么一旦出现需求变更,就需要把所有地方的if-else或者switch代码进行更改,要是遗漏了某一处 ...
- App上架注意事项(转)
上传不出现构建版本 现在苹果要求先上传版本,然后在提交审核,但是现在经常上传完应用后,不出现构建版本,等待很久很久,也不出现,那么怎么解决,我告诉你~~尼玛的苹果是自己数据丢包了,结果就造成你不出现构 ...
- Fantasy of a Summation n个数,k层重复遍历相加。求它的和%mod的值;推导公式+快速幂
/** 题目:Fantasy of a Summation 链接:https://vjudge.net/contest/154246#problem/L 题意:n个数,k层重复遍历相加.求它的和%mo ...
- Appium python自动化测试系列之元素的定位(六)
6.1 常用定位方法讲解 对象定位是自动化测试中很关键的一步,也可以说是最关键的一步,毕竟你对象都没定位那么你想操作也不行.所以本章节的知识我希望大家多动手去操作,不要仅仅只是书本上的知识,毕竟这个 ...