Vue.js的組件(slot/動態組件等)、單文件組件、遞歸組件使用

一、組件

　　1> 組件命名方式有兩種（注意：在DOM模板中只有kebab-case命名方法才生效）：

html中引用組件：
<!-- 在DOM模板中，只有 kebab-case命名才生效 -->
<my-component-name></my-component-name>

script:
Vue.component('my-component-name',{
   template:'<div>這是第一種命名方式：kebab-case</div>' 
   /* ... */ 
})


html中引用組件：
<my-component-name></my-component-name>

script:
/* 根據大寫字母隔開，my-component-name */
Vue.component('MyComponentName',{
   template:'<div>這是第二種命名方式：PascalCase</div>' 
   /* ... */ 
})

　　2> 全局組件與局部組件：

/*
* 全局組件可以在根組件的任何子組件中使用
*/
Vue.component('component-a',{/* ...組件相關配置... */})

/*
* 局部組件只能在當前注冊的組件實例中生效，在其子組件中也不生效
*/
var componentb = { /* ...組件相關配置... */ }
var vm = new Vue({
  el:'#app',　　
　'component-b':componentb /* 局部注冊組件 */
})

　3> 動態組件（component）

　

　4> 插槽（slot）

　 

二、單文件組件

　　1> 組成：單文件組件有 模板(<template></template>)、腳本(<script></script>) 與 樣式(<style><style>) 組成

<!-- 這是一個單文件組件 -->
<template>
　　<div>模板中只允許一個根元素，可以在這個根元素中進行編寫DOM結構</div>
</template>

<script>
/* export default:默認導出對象；在這里進行vue的相關選項配置與邏輯編寫 */
export default{
  name: 'App'
}
</script>

/* 
* scoped：表示樣式代碼只在該組件中生效  
* lang='stylus':表示樣式使用stylus格式進行編寫css
*/
<style lang='stylus' scoped>
    /* >>> 3個箭頭表示修改外部樣式（.樣式2） */
    .樣式1 >>> .樣式2
        background:red    
</style>
    

　　2> 單文件組件的注冊（局部注冊）：

<template>
　　<div>
          <!-- 引入組件 -->
          <test-component> </test-component>
      </div>
</template>

<script>
import TestComponent from '需要引入的組件路徑'
export default{
  name: 'App',
  components : {
    TestComponent /* 與寫法  TestComponent:TestComponent 一致，es6新特性 */
  }
}
</script>

<style lang='stylus' scoped>

</style>

　　

三、遞歸組件