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></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>