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,這樣也是可以的。

  注意:如果采用第一種方法,起的別名不能和已有的標簽沖突,否則不生效。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM