Vue.js之组件嵌套

Posted 靳哲

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,这样也是可以的。

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



以上是关于Vue.js之组件嵌套的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件

Vue.js 2 中的嵌套组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

在 Vue.js 中嵌套组件时出现未知的自定义元素

vue.js - 嵌套组件架构中的路由