SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('ComponentOne',{
  template: `
		<div>
			<slot>component-one 默认内容</slot>
		</div>
	`,
})
Vue.component('component-two',{
  template: `
		<div>
			<slot>component-two 默认内容</slot>
		</div>
	`,
})
Vue.component('component-three',{
  template: `
		<div>
		</div>
	`,
})

new Vue({
  el: '#component-demo',
})
<script src="https://unpkg.com/vue"></script>

<div id="component-demo">
  <div> 
    <h2>驼峰是大写命名的组件</h2>
    <component-one>组件1</component-one>
    <Component-one>组件2</Component-one>
    <component-One>组件3</component-One>
    <Component-One>组件4</Component-One>
    <ComponenT-One>组件5</ComponenT-One>
    <!-- 
      ComponentOne 应该显示“默认内容”,但是没用,说明组件失效,
      但是使用 webpack vue-loader 构建的是没问题的,浏览器 js 解析 template 
      有点不一样
    -->
    <ComponentOne></ComponentOne>
    <component-one></component-one>
    <h2>小写中划线命名的组件</h2>
    <component-two>组件1</component-two>
    <Component-two>组件2</Component-two>
    <component-Two>组件3</component-Two>
    <Component-Two>组件4</Component-Two>
    <ComponenT-Two>组件5</ComponenT-Two>
    <component-two></component-two>
    <!--这里必须使用 <></> 这种闭合方式-->
    <component-three />
    dd,后续的内容都没显示,应为被识别为 component-three 的子组件
    但是 component-three 没有使用插槽,所以没显示内容。
  </div>
</div>