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>

　　

三、递归组件