Vue.js之组件嵌套

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

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

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

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

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

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

第一种是:

1 components:{
2    "users":Users
3 }

第二种是:

1 components:{
2    Users
3 }

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

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

原文地址:https://www.cnblogs.com/jin-zhe/p/8317372.html

时间: 2024-10-13 18:40:15

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

Vue.js之组件嵌套小demo

Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件 Header.vue文件: 1 <!--1模板:html结构 --> 2 <template> 3 <header> 4 <h1>{{title}}</h1> 5 </header> 6 </template> 7

Vue.js的组件化思想--上

Vue.js的组件化思想--上 一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册  全局组件-步骤:1.创建组件Vue.extend(),指定组件的名称--2.注册组件Vue.component()--3.

Vue.js的组件化思想--下

Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子

Vue.js父子组件如何传值

https://blog.csdn.net/qq_40259641/article/details/81265950 Vue.js父子组件如何传值 通俗易懂原创 阿猫阿狗哈 发布于2018-07-28 22:04:42 阅读数 14278 收藏展开父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性 3.在A

Vue.js说说组件

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

VUE JS 使用组件实现双向绑定

1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现    在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器.

vue.js 创建组件 子父通信 父子通信 非父子通信

1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建组件</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> &l

Vue.js路由组件vue-router如何使用?

使用 Vue.js + vue-router 创建单页应用是非常简单的,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可.本文和大家分享的就是vue-router的相关使用方法,希望对大家学习Vue.js有所帮助. 一 普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <titl

vue.js之组件

摘要:代码复用一直是软件开发中长期存在的问题,每个开发者都想要再次使用之前写好的代码,又担心引入这段代码后对现有的程序产生影响.现在web Components的出现提供了一种新的思路,可以自定义tag标签,并拥有自身的模板,样式和交互.Vue.js提供了自己的组件系统,支持自定义tag元素和原生HTML元素的扩展 一.基本步骤 1.vue的组件使用有三个步骤:创建组件构造器.注册组件和使用组件 调用Vue.extend({...})创建组件构造器 调用Vue.component()方法注册组件