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,這樣也是可以的。
注意:如果采用第一種方法,起的別名不能和已有的標簽沖突,否則不生效。